• 广州葆元健康生物科技有限公司

    健康生活

    • 健康生活

    jQuery动画效果实现图片无缝连续滚动

    网络编程 jQuery动画效果实现图片无缝连续滚动 06-22

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下

    效果图如下:

    查看图片

    一、HTML代码

    <body> 
      <div id="container"> 
        <ul id="content"> 
          <li><a href="#"><img src="images/0.png"/></a></li> 
          <li><a href="#"><img src="images/1.png"/></a></li> 
          <li><a href="#"><img src="images/tewu.png"/></a></li> 
          <li><a href="#"><img src="images/2.png"/></a></li> 
          <li><a href="#"><img src="images/tewu.png"/></a></li> 
          <li><a href="#"><img src="images/3.png"/></a></li> 
          <li><a href="#"><img src="images/4.png"/></a></li> 
        </ul> 
      </div> 
    </body> 

    1. id为container的div是最外层的包装,用来控制滚动区域显示的具体位置。
    2. id为content的ul用来包装那些需要滚动的图片。

    3. li元素就是用来包装具体的图片。

    二、CSS代码

    *{margin: 0; padding: 0;} 
     
    img{ 
      border:0; 
    } 
     
    #container{ 
      width:800px; 
      height: 130px; 
    <span style="white-space:pre">  </span>margin:100px auto; 
      border:3px solid blue; 
      overflow: hidden; 
      position: relative; 
    } 
     
    #container ul{ 
      list-style: none; 
      width:10000px; 
      position: absolute; 
    } 
     
    #container ul li{ 
      float:left; 
      margin-right: 20px; 
    } 
    

    这里说明一点,ul 的 width为什么设置为10000px。 因为无缝连续滚动的实现原理,就是在现有显示图片的基础上克隆一份,并且拼接在显示图片的后面,但由于显示图片的总宽度是未知的,所以为了安全性,最好将ul的width宽度设置比较大些。

    三、无缝连续滚动原理分析

    查看图片

    四、JQuery实现代码

    <script type="text/javascript"> 
    /* window.onload比 $(function(){}) 加载的更晚一些,这样那些宽度的计算在Chrome中就可以准确计算了*/  
      window.onload = function(){ 
     
        /*计算一个segment的宽度*/ 
     
        var segmentWidth = 0; 
        $("#container #content li").each(function(){ 
          segmentWidth+= $(this).outerWidth(true); 
        }); 
     
        $("#container #content li").clone().appendTo($("#container #content")); 
     
        run(6000); 
     
        function run(interval){ 
          $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ 
            $("#container #content").css("left",0); 
            run(6000); 
          }); 
        } 
     
        $("#container").mouseenter(function(){ 
          $("#container #content").stop(); 
        }).mouseleave(function(){ 
          var passedCourse = -parseInt($("#container #content").css("left")); 
          var time = 6000 * (1 - passedCourse/segmentWidth); 
          run(time); 
        }); 
      }; 
         
    </script> 
    
    

    1. 先通过each遍历所有的li元素,计算出它们宽度之和。
    2. 拷贝一份图片到现有图片的后面,原理分析图的"图一"所示。

    3. 设置6秒钟滚动完界面上面现有的图片,滚动完毕后,通过设置content的left值,将其整体拉回到初始状态,原理分析图的"图二"所示。然后递归调用run方法,完成无限滚动。

    4. 当鼠标经过滚动区域的时候,动画立刻停止; 当鼠标离开的时候,动画继续执行。

    关于动画继续执行的代码,如下图分析:

    查看图片

    以上就是jQuery实现图片无缝连续滚动的代码,希望对大家的学习有所帮助。

    jQuery动画效果图片轮播特效
    从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的特效:传统轮播。一、需求分析1.提供很多尺寸相等的图片

    jquery对复选框(checkbox)的操作汇总
    jquery操作复选框(checkbox)的12个小技巧。1、获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name

    Jquery uploadify上传插件使用详解
    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可


    编辑:广州葆元健康生物科技有限公司

    标签:图片,宽度,代码,动画,原理

    分享:
    • Oracle招募杰出人才加入我们(oracle人才招聘)
    • Oracle实现两个数字相加的奇妙之旅(oracle两个数据相加)
    • 数据库C语言实现连接Oracle数据库(c 连接到oracle)
    • Oracle两次查询拼接实现复杂数据输出(oracle两次查询拼接)
    • MySQL中如何表示下划线(mysql下划线怎么表示)
    • 教程Oracle Jet视频教程学习实现Web应用所需技能(oracle jet视频)
    • Oracle中文分词技术简单而强大的自然语言处理工具(oracle 中文分词)
    • Oracle保留字转义破解技术的应用(oracle 保留字转义)
    • 学会使用CMD和MySQL命令行,让工作效率提升一个档次(cmd mysql命令行)
    • Oracle跳出许可证的追求(oracle不买许可证)
    © 祺平科技 • 版权所有 粤ICP备2023112468号     技术支持  www.zmcms.com