几种常用的特效

Posted 2020-10-25 paradise-zzz

1.回到顶部

 1 <script>
 2     var goTop = document.getElementById(‘goTop‘);
 3     goTop.onclick = function () {
 4         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 5         var timer = setInterval(function () {
 6             window.scrollTo(0, scrollTop-=10);
 7             if(scrollTop <= 0){
 8                 clearInterval(timer);
 9             }
10         }, 30);
11     };
12 </script>

2.拖拽方框到指定位置

 1 <script>
 2         var oDiv = document.getElementById(‘div1‘);
 3         oDiv.onmousedown = function (e) {
 4             e = e || window.event;
 5             //获得鼠标当前所在位置相对于div左边和上边的距离
 6             var disX = e.clientX - oDiv.offsetLeft;
 7             var disY = e.clientY - oDiv.offsetTop;
 8             document.onmousemove = function (e) {
 9                 e = e || window.event;
10                 oDiv.style.left = e.clientX - disX + ‘px‘;
11                 oDiv.style.top = e.clientY - disY + ‘px‘;
12             };
13             oDiv.onmouseup = function () {
14                 document.onmousemove = null;
15             };
16         };
17     </script>

3.轮播图

 1 function changImg(elem) {
 2             for(var i=0; i<aLi.length; i++){
 3                 aLi[i].className = ‘‘;
 4                 aImgs[i].className = ‘‘;
 5             }
 6             elem.className = ‘selected‘;
 7             aImgs[elem.index].className = ‘selected‘;
 8         }
 9         oNext.onclick = function () {
10             index++;
11             if(index == aLi.length){
12                 index = 0;
13             }
14             changImg(aLi[index]);
15         };
16         oPrev.onclick = function(){
17             index--;
18             if(index == -1){
19                 index = aLi.length - 1;
20             }
21             changImg(aLi[index]);
22         };
23         var timer;
24         function run() {
25             timer = setInterval(function () {
26                 oNext.onclick();
27             }, 2000);
28         }
29         run();
30         oContainer.onmouseover = function () {
31           clearInterval(timer);
32         };
33         oContainer.onmouseout = function () {
34             run();
35         };

4.选择器

 1   var aDiv = oContent.children;
 2         for(var i=0; i<aLi.length; i++){
 3             aLi[i].index = i;
 4             aLi[i].onclick = function () {
 5                 for(var i=0; i<aLi.length; i++){
 6                     aLi[i].className = ‘‘;
 7                     aDiv[i].className = ‘‘;
 8                 }
 9                 this.className = ‘selected‘;
10                 aDiv[this.index].className = ‘selected‘;
11             };
12         }