找回密码
当前位置：前端开发者 > CSS > 正文

前端开发入门_js+CSS3动画实现手风琴

2018-07-10 分类：CSS 阅读(764) 评论(0)

CSS3前端 java后端开发|前端开发macbook|web前端开发js

html 代码

<head>
    <meta charset=”utf-8″>
    <title>前端开发js:css3手风琴</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a img {
            border: none;
        }
        a {
            text-decoration: none;
        }
        .swicth-box {
            width: 920px;
            height: 280px;
            margin: 150px auto;
            overflow: hidden;
            border: 1px solid #ddd;
            border-top: 2px solid #728ca4;
        }
        .swicth-box>ul {
            width: 100%;
            height: 100%;
            position: relative;
            margin-top: 4px;
        }
        .swicth-box>ul>li {
            list-style: none;
            position: absolute;
            top: 0;
            background-color: #fff;
            transition: 1s all ease-in-out;
        }
        .swicth-box>ul .item {
            width: 520px;
            height: 280px;
            box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.20);
            -webkit-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.20);
            -o-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.20);
            -moz-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.20);
            -ms-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.20);
            overflow: hidden;
        }
        .over:after {
            content: ”;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
        }
    </style>
</head>
<body>
    <div class=”swicth-box”>
        <ul>
            <li class=”item other over”>
                <img src=”https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg” />
            </li>
            <li class=”item iran”>
                <img src=”https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp” />
            </li>
            <li class=”item egypt”>
                <img src=”https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg” />
            </li>
            <li class=”item turkey”>
                <img src=”https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg” />
            </li>
            <li class=”item india”>
                <img src=”https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg” />
            </li>
            <li class=”item china”>
                <img src=”https://img.alicdn.com/tfs/TB12mCBfPnD8KJjSspbXXbbEXXa-520-280.jpg_q90_.webp” />
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    window.onload = function () {
        /****getStyle封装计算后样式*****/
        function getStyle(element, attr) {
            if (element.currentstyle) {
                return element.currentstyle[attr];
            } else {
                return window.getComputedStyle(element, null)[attr];
            }
        }
        /**构造函数**/
        function Accordion(obj) {
            var _this = this;
            this.box = document.querySelector(obj.dom);
            this.li = _this.box.children[0].children; //获取整个容器里所有的li项；
            this.ul_width = Number(getStyle(_this.box.children[0], ‘width’).replace(“px”, ”)); //获取ul的宽度
            this.li_width = Number(getStyle(_this.box.children[0].children[0], ‘width’).replace(“px”, ”)); //获取li的宽度
            this.spacing = (_this.ul_width – _this.li_width) / (_this.li.length – 1);
            this.init = function () {
                for (var i = 0; i < _this.li.length; i++) {
                    if (i == 0) {
                        _this.li[0].style.left = 0;
                        _this.li[0].classList.remove(“over”);
                    } else {
                        _this.li[i].style.left = _this.li_width + _this.spacing * (i – 1);
                        _this.li[i].classList.add(“over”);
                    }
                }
            };
            this.move = function () {
                var places = new Array(); //创建数组保存每个li的位置
                for (var i = 0; i < _this.li.length; i++) {
                    (function (i) {
                        _this.li[i].onmouseover = function (e) {
                            var e = e || window.event;
                            if (e.cancelBubble) {
                                e.cancelBubble = true;
                            } else {
                                e.topPropagation;
                            }
                            /******根据鼠标hovre的下标判断每个li的位置******/
                            switch (i) {
                                case 0:
                                    for (var index = 0; index < _this.li.length; index++) {
                                        if (index == 0) {
                                            places[0] = 0;
                                        } else {
                                            places[index] = _this.li_width + (index – 1) * _this.spacing;
                                        }
                                    }
                                    break;
                                default:
                                    for (var index = 0; index < _this.li.length; index++) {
                                        if (index == 0) {
                                            places[0] = 0;
                                        } else if (index <= i) {
                                            places[index] = _this.spacing * index;
                                        } else {
                                            places[index] = _this.li_width + (index – 1) * _this.spacing;
                                        }
                                    }
                                    break;
                            }
                            /****给每个li的left赋值****/
                            for (var index = 0; index < _this.li.length; index++) {
                                _this.li[index].style.left = places[index];
                                _this.li[index].classList.add(“over”);
                            }
                            _this.li[i].classList.remove(“over”);
                        }
                    }(i));
                }
            }
            this.init(); //自执行初始化方法
        }
        var accordion = new Accordion({ dom: ‘.swicth-box’ });
        accordion.move();
    }
</script>
gulp前端开发框架|前端开发框架react|html5前端开发视频教程
赞(0)
前端开发者 » 前端开发入门_js+CSS3动画实现手风琴
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论