js简单动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4
        ];

        window.onload = function () {
            var flag = true;
            function flower() {
                for ( var i = 0; i < list.length;i++){
                    animate5(list[i],config[i],function () {
                        flag = true; //执行完函数则为true
                    });
                }
            }

            var list = my$("slide").getElementsByTagName("li");
            //图片散开
            for (var i = 0; i < list.length; i++) {
                //设置每一个li的宽，透明度，left，top，z-index
                animate5(list[i], config[i]);
            }
            my$("slide").onmouseover = function () {
                animate5(my$("arrow"), {"opacity": 1});
            }
            my$("slide").onmouseout = function () {
                animate5(my$("arrow"), {"opacity": 0});
            }

            my$("arrRight").onclick = function () {
                if (flag){
                    config.unshift(config.pop());
                    flower();
                    flag = false;
                }
            }
            my$("arrLeft").onclick = function () {
                if (flag){
                    config.push(config.shift());
                    flower();
                    flag = false;
                }
            }
        }


//封装变速函数    透明度（0-1）
function animate5(element,json,fn) {
    clearInterval(element.timeID);
    element.timeID = setInterval(function () {
        //假设都到目标值
        var flag = true;
        //遍历json对象中的每个属性
        for ( var attr in json){
            if (attr == "opacity"){
                //获取当前元素的属性值
                var current = parseInt(getStyle(element,attr)*100);
                //获取目标值
                var target = json[attr]*100;
                //移动的步数
                var step = (target - current) /10;
                //判断
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current / 100;
            }else if (attr == "zIndex"){
                //直接改变层级
                element.style[attr] = json[attr];
            } else {
                //获取当前元素的属性值
                var current = parseInt(getStyle(element,attr));
                //获取目标值
                var target = json[attr];
                //移动的步数
                var step = (target - current) /10;
                //判断
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current + "px";
            }
            if (current != target){
                flag = false
            }
        }
        if (flag){
            clearInterval(element.timeID);
            //判断是否传入了这个函数
            if (fn){
                fn();
            }
        }
    },30)
}

function my$(id){
    return document.getElementById(id);
}

function getStyle(element,attr){
    return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currenStyle[attr];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
* {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }

1
2
3
4
5
6
7
8
9
10
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var box = my$("box");
    //获取小图的div
    var small = box.children[0];
    //获取遮挡层
    var mask = small.children[1];
    //获取大图的div
    var big = box.children[1];
    //获取大图
    var bigImg = big.children[0];

    //鼠标移入移出事件
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    }
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }

    //移动事件
    small.onmousemove = function (e) {
        //获取鼠标此时可视区域的横纵坐标,去掉父亲的margin值
        var x = e.clientX - 100;
        var y = e.clientY - 100;

        //设置鼠标在遮挡层的中间显示
        x = x - mask.offsetWidth / 2;
        y = y - mask.offsetHeight / 2;

        //设置横纵坐标的最小值
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;

        //设置横纵坐标的最大值
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

        //赋值给遮挡层
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //遮挡层的移动距离 / 大图的移动距离 = 遮挡层最大的移动距离 / 大图最大的移动距离
        //大图的移动距离 = 遮挡层的移动距离 * 大图最大的移动距离 / 遮挡层最大的移动距离

        //大图最大的移动距离
        var maxX = bigImg.offsetWidth - big.offsetWidth;
        var maxY = bigImg.offsetHeight - big.offsetHeight;

        //求大图的移动距离
        var bigImgX = x * maxX / (small.offsetWidth - mask.offsetWidth);
        var bigImgY = y * maxY / (small.offsetHeight - mask.offsetHeight);


        bigImg.style.marginLeft = -bigImgX + "px";
        bigImg.style.marginTop = -bigImgY + "px";
    }

function my$(id){
    return document.getElementById(id);
}