三、jQuery的API （五）- 动画模块1（定时任务实现动画效果）

最新推荐文章于 2023-04-26 14:19:20 发布

二旬、

最新推荐文章于 2023-04-26 14:19:20 发布

阅读量228

点赞数

分类专栏： WEB基础-jQuery 文章标签： jquery 动画 css

本文链接：https://blog.csdn.net/weixin_45602227/article/details/120155027

版权

WEB基础-jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、定时器完成动画效果

1.1 使用定时器完成动画效果案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div style="width:100px;height:100px;background-color: red; display: inline-block;"></div>
    <br/>

    <button>变长</button><button>变宽</button><button>向下移动</button><button>向上移动</button>
</body>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>    

            function move(obj,attr,target,speed,fn){

                if(move.id){
                    clearInterval(move.id)
                }

                move.id=window.setInterval(function(){



                    var nowValue=parseInt($(obj).css(attr));

                    nowValue+=speed;
                    if(speed>0 && nowValue>=target || speed<0 && nowValue<=target){
                        nowValue=target;
                        window.clearInterval(move.id);

                        //回调函数
                        fn();
                    }

                    $(obj).css(attr,nowValue);

                },20)
            }

            //变长
            $("button").eq("0").click(function(){
                move($('div'),'height',300,20,function(){
                    console.log('到达')
                })
            })

            //变宽
            $("button").eq("1").click(function(){
                move($('div'),'width',300,20,function(){
                    console.log('到达')
                })
            })

              //向下移动
              $("button").eq("2").click(function(){
                move($('div'),'margin-top',300,20,function(){
                    console.log('到达')
                })
            })

             //向上移动
             $("button").eq("3").click(function(){
                move($('div'),'margin-top',0,-20,function(){
                    console.log('到达')
                })
            })

</script>
</html>

在这里插入图片描述

1.2 注意事项

1）定时器的任务是在主函数代码执行完毕后，才执行。

2）在定时器中关闭定时器，当前开启的任务会执行完毕后，不在执行

3）定时器关闭后，定时器ID实质上依旧存在

二、定时器使用案例 – 轮播图

2.1 实现功能

	
	实现功能：
			1、点击左右图标平滑翻页
			2、无线循环切换
			3、鼠标移出自动翻页，鼠标移入停止翻页
			4、点击圆点切换到对应的图片上

2.2 代码实现

>>>>>> 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin:0px;
            padding:0px;
        }


        .wrapper{
            width:700px;
            height:400px;
            margin:20px auto;
            position: relative;

            overflow: hidden;
        }

        .imags{
            width:4900px;
            height:400px;
            padding:0px;
            position: relative;
            left:-700px;
        }

        .imags img{
            width:700px;
            height:100%;
            margin:0px;
            float:left;
        }

        ul{
            position: absolute;
            z-index:999;
            list-style: none;
            bottom:15px;
            left:0;
            right:0;
            margin:0 auto;
            width:150px;
            display: flex;
            justify-content: space-around;
         
        }



        .wrapper .dot{
            width:13px;
            height:13px;
            background-color: rgba(0,0,0,0.5);
            border:1px solid white;
            border-radius: 50%;
        }

        .wrapper .dot:hover{
            background-color:red;
        }


        .wrapper .arrow:first-of-type{
            position: absolute;
            display: inline-block;
            border:20px solid transparent;
            z-index: 999;

            top:200px;
            left:20px;
        }

        .wrapper .arrow:last-of-type{
            position: absolute;
            display: inline-block;
            border:20px solid transparent;
            z-index: 999;            
            top:200px;
            right:20px;
        }

        .wrapper:hover .arrow:first-of-type{
            border-right-color:pink;
        }
        .wrapper:hover .arrow:last-of-type{
            border-left-color:pink;
        }
        .wrapper:hover li{
            background-color: white;
        }

        .wrapper li.fo{
            background-color: red;
        }

    </style>
</head>
<body>
    
    <div class="wrapper">
           
            <div class="imags">

                
                <img src="img/5.jpg" > 

                <img src="img/1.jpg" >
                <img src="img/2.jpg" >
                <img src="img/3.jpg" >
                <img src="img/4.jpg" >
                <img src="img/5.jpg">                
                
                <img src="img/1.jpg" >

            </div>

            
            <ul>
                <li class="dot fo"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
            </ul>

            <span class="arrow next" ></span>
            <span class="arrow prev"></span>

    </div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>

    //重置红圆点
    function resetPoint(targetImgIndex){

            //使用arr来控制圆点的索引值
            var arr=[0,4,3,2,1]

            if(targetImgIndex>=6){
                targetImgIndex=1;
            }else if(targetImgIndex==0){
                targetImgIndex=5;
            }

            $(".dot").removeClass('fo').eq(arr[(targetImgIndex-1)]+"").addClass('fo');
    }


    //下一页
    function nextPage(flag,tp){

        if(nextPage.timer){
           return;
        }

        //当前图片索引值
        nextPage.imgIndex=parseInt($('.imags').position().left/-700);
        console.log('当前图片',nextPage.imgIndex)

        //当前位置
        var nowPosition=parseInt($('.imags').position().left)

        //目标位置
        var targetPosition=tp?tp:parseInt(flag?nowPosition-700:nowPosition+700);
        var targetImgIndex=parseInt(targetPosition/-700);

        //单位偏移量
        var item_offset=flag?-20:20;
        //单位偏移时间
        var item_offtime=10;

        //开启定时
        nextPage.timer =  window.setInterval(function(){
                //当前位置
                var curPosition=parseInt($('.imags').position().left)
                curPosition+=item_offset;

                if((item_offset>0 && curPosition>=targetPosition)||(item_offset<0 && curPosition<=targetPosition)){
                    
                    //清空定时器
                    clearInterval(nextPage.timer);
                    nextPage.timer = undefined;

                    //纠正位置
                    curPosition=targetPosition;

                    //纠正位置
                    if(targetImgIndex===6){
                         //当位置在最右边的图片，则跳转到第二个
                        curPosition=-700;

                    }else if(targetImgIndex==0){
                        //当位置是最左边的图片,则跳转到第5个
                        curPosition=-700*5;

                    }

                    //设置圆点
                    resetPoint(targetImgIndex);
                    // console.log('当前图片：'+ nextPage.imgIndex + "  ,目标图片:"+targetImgIndex)
                }

                $('.imags').css('left',curPosition);

        },item_offtime)        

   }

    
    //自动循环翻页
    var timer=window.setInterval(function(){
        nextPage(true);
    },2000);


    //鼠标移入停止循环
    //鼠标移出开始循环
    $(".wrapper").hover(function(){
     
        window.clearInterval(timer)

    },function(){
        timer=window.setInterval(function(){
                if(timer){
                    window.clearInterval(timer)
                }
                nextPage(true);
        },2000);
    })
    
    //左移
    $(".next").click(function(){
        //下一张图片
        nextPage(true);

    })

    //右移
    $(".prev").click(function(){
        //上一张图片
        nextPage(false);
    })


    //圆点点击事件
    $(".dot").click(function(){

        window.clearInterval(timer)

         //使用arr来控制图片的索引值
         var arr=[1,5,4,3,2]

        var nowImageIndex=parseInt($('.imags').position().left/-700);
        var targetImageIndex= arr[$(this).index()];

        console.log('当前图片索引值:',nowImageIndex,'目标索引值',targetImageIndex)

        if(nowImageIndex<=targetImageIndex){
            nextPage(true,targetImageIndex*(-700));
        }else{
            nextPage(true,targetImageIndex*(-700));
        }
    })





</script>


</html>

>>>>>> 效果图

在这里插入图片描述

2.3 核心技术解析

1）轮播图原理

	
	1、在一个宽度为2500px的div的平行排列5张宽度为500px的图片。
	
	2、然后再外面套上一个500px的div，并设置overflow:hidden。
	   此时内部溢出的图片就会被隐藏。只显示一张图片。
	
	3、然后通过移动大div的左右位置，来调节图片的位置。
				
				【类似于相框和相片，相片很长，但是也只显示一部分】

>>>>>> 轮播图原理案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin:0px;
            padding:0px;
        }


        .wrapper{
            width:700px;
            height:400px;
            margin:20px auto;
            position: relative;

            overflow: hidden;
        }

        .imags{
            width:4900px;
            height:400px;
            padding:0px;
            position: relative;
        }

        .imags img{
            width:700px;
            height:100%;
            margin:0px;
            float:left;
        }

       
    </style>
</head>
<body>
    
    <div class="wrapper">
           
            <div class="imags">
                
                <img src="img/5.jpg" alt="1">

                <img src="img/1.jpg" alt="1">
                <img src="img/2.jpg" alt="2">
                <img src="img/3.jpg" alt="3">
                <img src="img/4.jpg" alt="4">
                <img src="img/5.jpg" alt="5">                
                
                <img src="img/1.jpg" alt="5">

            </div>

    </div>
</body>



</html>

在这里插入图片描述

2）轮播图实现平滑翻页、无限循环效果的原理

	
	实现平滑翻页、无限循环的方式:
	
		1) 在第一张图片的前面另外加上最后一张图片。
		   在最后一张图片的后面另外加上第一张图片。
		
		2) 当即将到达最右边的图片时，就直接跳转到第一张图片。
		   当即将到达最左边的图片时，就直接跳转到最后一张图片。


            <div class="imags">

                //再左右两端各自加上临界图片。
                <img src="img/5.jpg" >  <!-- 临界图片 -->

                <img src="img/1.jpg" >
                <img src="img/2.jpg" >
                <img src="img/3.jpg" >
                <img src="img/4.jpg" >
                <img src="img/5.jpg">                
                
                <img src="img/1.jpg" >  <!-- 临界图片 -->

            </div>

3）相关API详解


   $('.imags').css('left','90'); 
   $('.imags').css('left','90px');	
   					设置css样式时，可以加上单位也可以不加。
   					但是获取css样式时，会有单位。
	
	
	$('.imags').position().left
					获取定位元素的左右设置的值。

二旬、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三、jQuery的API （五）- 动画模块1（定时任务实现动画效果）

一、轮播图4.1 实现功能实现功能： 1、点击左右图标平滑翻页 2、无线循环切换 3、鼠标移出自动翻页，鼠标移入停止翻页 4、点击圆点切换到对应的图片上 4.2 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
复制链接

扫一扫