annonmie

 

 

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             body{
12                 overflow: hidden;
13             }
14             div{
15                 width: 100px;
16                 height:100px;
17                 background-color: black;
18                 position: absolute;
19                 left: 0;
20                 right: 0;
21             }
22         </style>
23     </head>
24     <body>
25     <div></div>
26     <script>
27         var speedX = 5;
28         var speedY = 3;
29         var div = document.querySelector('div');
30 
31         function move() {
32             var currentLeft = parseInt(window.getComputedStyle(div).left);
33             var currentTop = parseInt(window.getComputedStyle(div).top);
34             var left = currentLeft + speedX;
35 
36             check_border_collision(div);//调用碰撞的函数
37 
38             var left = currentLeft + speedX;
39             var  top = currentTop + speedY;
40             div.style.left = left +'px';
41             div.style.top = top + 'px';
42         }
43 
44         function check_border_collision(el){
45             var style = window.getComputedStyle(el);
46             var left = parseInt(style.left);
47             var top = parseInt(style.top);
48             var w = parseInt(style.width);
49             var h = parseInt(style.height);
50 
51             if(left < 0){
52                 left = 0;
53                 speedX *= -1;
54             }
55             if(left > window.innerWidth - w ){
56                 left = window.innerWidth - w;
57                 speedX *= -1;
58             }
59             if(top < 0){
60                 top = 0;
61                 speedY *= -1;
62             }
63             if(top > window.innerHeight - h){
64                 top = window.innerHeight - h;
65                 speedY *= -1;
66             }
67 
68             el.style.top = top + "px";
69             el.style.left = left + "px";
70 
71         }
72         setInterval(function () {
73             move()
74 
75         },20);//设定间隔时间
76 
77     </script>
78     </body>
79 </html>

 

 





 1 function getStyle(el,property) {
 2     if(getComputedStyle){
 3         return getComputedStyle(el)[property]
 4     }else{
 5         return  el.currentStyle[property];
 6     }
 7 }
 8 function animate(el,property,target) {
 9 
10     setInterval(function () {
11         var current = parseInt(getStyle(el, property));
12         var speed = (target - current) / 30;
13         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
14         el.style[property] = current + speed + 'px';
15 
16     }, 20);
17 }






 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
            top: 0;
            position: absolute;
        }
    </style>
</head>
<body>
<div></div>
<script src="./animation.js"></script>
<script>
    var div = document.querySelector('div');
    animate(div,'left',500);
</script>
</body>
</html>






 1 function getStyle(el,property) {
 2     if(getComputedStyle){
 3         return getComputedStyle(el)[property]
 4     }else{
 5         return  el.currentStyle[property];
 6     }
 7 }
 8 function animate(el,properties) {
 9     clearInterval(el.timerId);
10     el.timerId = setInterval(function () {
11         for (var property in properties) {
12             var current;
13             var target = properties[property];
14 
15             if (property === 'opacity') {
16                 current = Math.round(parseFloat(getStyle(el, 'opaciuty')) * 100);
17             } else {
18                 current = parseInt(getStyle(el, property));
19             }
20 
21             var speed = (target - current) / 30;
22             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
23             if (property === 'opacity') {
24                 el.style.opacity = (current + speed) / 100;
25             } else {
26                 el.style[property] = current + speed + 'px';
27             }
28         }
29 
30     }, 20);
31 }





 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0;
10         }
11         div{
12             width: 100px;
13             height: 100px;
14             background-color: black;
15             left: 0;
16             top: 0;
17             position: absolute;
18             opacity: 1;
19         }
20     </style>
21 </head>
22 <body>
23 <div></div>
24 <script src="./animation.js"></script>
25 <script>
26     var div = document.querySelector('div');
27     animate(div, {
28         width:200,
29         left:500,
30         opacity:20
31         });
32 </script>
33 </body>
34 </html>




 




 封装动画函数




 1 function getStyle(el,property) {
 2     if(getComputedStyle){
 3         return getComputedStyle(el)[property];
 4     }else {
 5         return el.currentStyle[property];//兼容IE
 6     }
 7 }
 8 function animate(el,properties) {
 9     clearInterval(el.timerId);
10     el.timerId = setInterval(function () {
11         for (var property in properties) {
12             var current;
13             var target = properties[property];
14 
15             if (property === 'opacity') {
16                 current = Math.round(parseFloat(getStyle(el, 'opacity')) * 100);
17             } else {
18                 current = parseInt(getStyle(el, property));
19             }
20 
21             var speed = (target - current) / 30;
22             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
23             if (property === 'opacity') {
24                 el.style.opacity = (current + speed)/100;
25             } else {
26                 el.style[property] = current + speed + 'px';
27             }
28         }
29 
30     }, 20);
31 }




调用动画函数




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         div{
12             width: 100px;
13             height: 100px;
14             background-color: black;
15             left: 0;
16             top: 0;
17             position: absolute;
18             opacity: 1;
19         }
20     </style>
21 </head>
22 <body>
23 <div></div>
24 <script src="./animation.js"></script>
25 <script>
26     var div = document.querySelector('div');
27     animate(div, {
28         width:200,
29         left:500,
30         opacity:20
31         });
32 </script>
33 </body>
34 </html>




透明度轮播图




  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul{
 12             list-style: none;
 13         }
 14         .slider{
 15             width: 500px;
 16             height: 375px;
 17             border: 5px solid crimson;
 18             position: relative;
 19         }
 20         .slider .list .item{
 21             position: absolute;
 22             left: 0px;
 23             top: 0px;
 24             opacity: 0;
 25         }
 26         .slider .list .item:first-of-type{
 27             opacity: 1;
 28         }
 29         .slider.list.item img{
 30             width: 500px;
 31             height: 375px;
 32             display: block;
 33         }
 34         .slider .next, .slider .prev{
 35             position: absolute;
 36             top:190px;
 37         }
 38         .slider .next{
 39             right: 0;
 40         }
 41         .slider .pagination{
 42             position: relative;
 43             top: 300px;
 44         }
 45         .slider .pagination .bullet{
 46             width: 20px;
 47             height: 20px;
 48             background-color: black;
 49             margin-left: 5px;
 50             float:left;
 51             border: 2px solid yellow;
 52             cursor: pointer; //鼠标变手
 53             color:white;
 54             line-height:20px;
 55             text-align: center;
 56 
 57         }
 58         .slider .pagination .bullet.focus{
 59             background-color:hotpink;  //焦点样式
 60         }
 61 
 62     </style>
 63 
 64 </head>
 65 <body>
 66 <div class="slider">
 67     <ul class="list">
 68         <li class="item"><img src="imgs/001.jpg" alt=""></li>
 69         <li class="item"><img src="imgs/002.jpg" alt=""></li>
 70         <li class="item"><img src="imgs/003.jpg" alt=""></li>
 71         <li class="item"><img src="imgs/004.jpg" alt=""></li>
 72     </ul>
 73     <button class="prev">prev</button>
 74     <button class="next">next</button>
 75     <ul class="pagination">
 76         <li class="bullet">1</li>
 77         <li class="bullet">2</li>
 78         <li class="bullet">3</li>
 79         <li class="bullet">4</li>
 80     </ul>
 81 </div>
 82 <script src="imgs/animation.js"></script>
 83 <script>
 84     (function(){
 85         var prevIndex,nextIndex;
 86         var len ;
 87         var id;
 88 
 89         init();//调用
 90 
 91         function init(){
 92             prevIndex = nextIndex = 0;
 93             len = document.querySelectorAll('.list .item').length;
 94 
 95             document.querySelector('.prev').onclick = function(){
 96                 slidePrev();
 97             }
 98             document.querySelector('.next').onclick = function(){
 99                 slideNext();
100             }
101 
102             //底部轮播的操作
103             var bullets = document.querySelectorAll('.slider .pagination .bullet');//取出所有子弹
104             for(var i = 0;i < bullets.length;i++){
105                 bullets[i].index = i;
106                 bullets[i].onclick = function () { //子弹做点击事件
107                     prevIndex = nextIndex;
108                     nextIndex = this.index;
109                     slideTo(prevIndex,nextIndex);//调用
110 
111                 }
112             }
113             //监听mouseover事件
114             var slider = document.querySelector('.slider');
115             slider.onmouseover = function(){
116                 stop();
117             }
118             slider.onmouseout = function(){
119                 auto();
120             }
121             auto();//调用自动轮播
122         }
123  
124         function slidePrev(){
125             prevIndex = nextIndex;
126             nextIndex--;
127             if(nextIndex === -1){
128                 nextIndex = len - 1;
129             }
130             slideTo(prevIndex,nextIndex);
131         }
132 
133         function slideNext(){
134             prevIndex = nextIndex;
135             prevIndex = nextIndex;
136             nextIndex++;
137             if(nextIndex === len){
138                 nextIndex = 0;
139             }
140             slideTo(prevIndex,nextIndex);
141         }
142 
143         function slideTo(prev,next){
144 
145             var lis = document.querySelectorAll('.list .item');
146             var bullets = document.querySelectorAll('.slider .pagination .bullet');
147 
148             bullets[prev].className = 'bullet';
149             bullets[next].className = 'bullet focus';
150 
151             animate(lis[prev],{opacity:0});
152             animate(lis[next],{opacity:100});
153 
154         }
155         
156         //自动轮播
157         function auto() {
158             clearInterval(id);//每次调用时，清除id。
159             id = setInterval(function () {
160                 slideNext();
161 
162             },2000);
163 
164         }
165         function stop() {
166             clearInterval(id);//清除
167 
168 
169         }
170     })()
171 </script>
172 </body>
173 </html>




 水平轮播图




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{                  //清除默认样式
            margin: 0px;
            padding: 0;
        }
        ul{
            list-style: none;//清除列表样式
        }
        .slider{             //最外层div标签
            width: 500px;
            height: 375px;
            position: relative;
            overflow: hidden;//溢出：隐藏
        }
        .slider .list{
            position: absolute;
            width: 3000px;
        }
        .slider .list .item{ //图片大小位置
            width:500px;
            height: 375px;
            float: left;
        }
        .slider .list .item img{//图片大小动画
            width: 500px;
            height: 375px;
            display: block;
        }
        .slider .prev, .slider .next{//按钮位置
            position: absolute;
            top: 150px;
        }
        .slider .next{
            right: 0px;
        }
        .slider .pagination .bullet{  //子弹的属性
            width: 20px;
            height: 20px;
            background-color: black;
            margin-left: 5px;
            top: 200px;
            z-index: 999;
            position: relative;
            float: left;
            cursor: pointer;
        }
        .focus{
            background-color: yellow !important;//!important设置有优先级
        }
    </style>
</head>
<body>
<div class="slider">
    <ul class="list">
        <li class="item"><img src="./imgs/001.jpg" alt=""></li>
        <li class="item"><img src="./imgs/002.jpg" alt=""></li>
        <li class="item"><img src="./imgs/003.jpg" alt=""></li>
        <li class="item"><img src="./imgs/004.jpg" alt=""></li>
    </ul>
    <button class="prev">prev</button>
    <button class="next">next</button>
    <ul class="pagination">
        <li class="bullet focus" ></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
    </ul>
</div>
<script src="./animation.js"></script>
<script>
    (function () {
        var currIndex;
        var lis;
        var liwidth;
        var len;
        var id;

        init();//调用函数

        function init() {
            currIndex = 1;

            var li_1 =document.querySelector('.slider .list .item:first-of-type');
            var copy_1 = li_1.cloneNode(true);//传true将子元素一同复制
            var li_last = document.querySelector('.slider .list .item:last-of-type');
            var copy_last = li_last.cloneNode(true);

            var list = document.querySelector('.slider .list');
            list.appendChild(copy_1);
            list.insertBefore(copy_last,li_1);

            lis = document.querySelectorAll('.list .item');
            liwidth = lis[0].offsetWidth;//任何一个的宽度
            len = lis.length;

            list.style.width = liwidth * len +'px';

            list.style.left = -liwidth + 'px';

            //监听前进/后退的点击事件
            document.querySelector('.prev').onclick = function () {
                sliderPrev();
            }
            document.querySelector('.next').onclick = function () {
                sliderNext();
            }

            //监听所有的子弹
            var bullets = document.querySelectorAll('.slider .pagination .bullet');
            //遍历子弹
            for(var i = 0;i < bullets.length; i++){
                bullets[i].index = i;
                bullets[i].onclick = function () {
                    currIndex = this.index + 1;
                    sliderTo(currIndex);
                }
            }

            //监听鼠标移进移出事件
            var slider = document.querySelector('.slider');
            slider.onmouseover = function(){
                stop();//调用停止轮播
            }
            slider.onmouseout = function(){
                auto();//调用自动轮播
            }
            auto();//调用自动轮播

        }
        function sliderNext() {
            currIndex++;
            sliderTo(currIndex);
        }
        function sliderPrev() {
            currIndex--;
            sliderTo(currIndex)
        }
        //切换下一轮的瞬移动画
        function sliderTo(index) {
            var list = document.querySelector('.slider .list');
            if(index === len){
                currIndex = index = 2;
                list.style.left = -liwidth + 'px';
            }
            if(index === -1){
                currIndex = index = len-3;
                list.style.left = -(len-2) * liwidth + "px";
            }

            //子弹与前进后退事件绑定
            var focusIndex;
            var bullets = document.querySelectorAll('.pagination .bullet');
           if(index === 0){
               focusIndex = bullets.length-1;
           }else if(index === len -1){
               focusIndex = 0;
           }else{
               focusIndex = index - 1;
           }
           document.querySelector('.focus').className = 'bullet';
           bullets[focusIndex].className = 'bullet focus';

            var left = -index * liwidth;

            animate(list,{
                left:left
            })
        }
        function auto() {
            clearInterval(id);
            id = setInterval(function () {
                sliderNext();
            },2000)

        }
        function stop() {
            clearInterval(id);
        }

    })()
</script>


</body>
</html>




 






            

            
posted @ 
2020-07-12 09:20 
梦晶秋崖 
阅读(62) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    



	

	

	
	

	

	

	





    

        





返回顶端