JS简单封装的图片无缝滚动效果示例【测试可用】


Posted in Javascript onMarch 22, 2017

本文实例讲述了JS简单封装的图片无缝滚动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无缝滚动图片示例-F-BLOG</title>
    <style type="text/css">
      ul{list-style:none;padding:0px;margin:0px;}
      #demo1 ul,#demo2 ul{width:400px;}
      #demo1 li,#demo2 li{float:left;}
    </style>
    <script type="text/javascript">
      function $(id){
        return document.getElementById(id);
      }
      function Marquee(id,toFollow,speed)
      {
        var doScroll;
        var scrollBox_x="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
        var scrollBox_y="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td></tr><tr><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
        var begin=function(){
          switch(toFollow){
            case "left":
              $(id).innerHTML=scrollBox_x;
              doScroll=setInterval(function(){
                if($(id).scrollLeft==$(id+"abox").offsetWidth) $(id).scrollLeft=0;
                $(id).scrollLeft++;
              },speed);
              break;
            case "right":
              $(id).innerHTML=scrollBox_x;
              doScroll=setInterval(function(){
                if($(id).scrollLeft<=0) $(id).scrollLeft=$(id+"bbox").offsetWidth;
                $(id).scrollLeft--;
              },speed);
              break;
            case "top":
              $(id).innerHTML=scrollBox_y;
              doScroll=setInterval(function(){
                if($(id).scrollTop==$(id+"abox").offsetHeight) $(id).scrollTop=0;
                $(id).scrollTop++;
              },speed);
              break;
            case "bottom":
              $(id).innerHTML=scrollBox_y;
              doScroll=setInterval(function(){
                if($(id).scrollTop<=0) $(id).scrollTop=$(id+"bbox").offsetHeight;
                $(id).scrollTop--;
              },speed);
              break;
            }
          }
          begin();
          $(id).onmouseover=function() {clearInterval(doScroll);}
          $(id).onmouseout=function() {begin();}
        }
        window.onload=function(){
          Marquee("demo2","left",30);
          Marquee("demo1","right",20);
          Marquee("demo3","top",30);
          Marquee("demo4","bottom",30);
        }
</script>
  </head>
<body>
   <div id="demo1" style="overflow:hidden;height:100px;width:300px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo2" style="overflow:hidden;height:100px;width:300px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo3" style="overflow:hidden;height:150px;width:200px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
   <br/>
   <div id="demo4" style="overflow:hidden;height:150px;width:200px;">
     <ul>
       <li><img src="mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" /></li>
       <li><img src="me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" /></li>
     </ul>
   </div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
JS+DIV实现的卷帘效果示例
Mar 22 #Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 #Javascript
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php获取apk包信息的方法
2014/08/15 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
js 处理URL实用技巧
2010/11/23 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现查询IP地址所在地
2015/03/29 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
春节联欢会主持词
2014/03/24 职场文书
教师节演讲稿
2014/05/06 职场文书
大专毕业生求职信
2014/07/05 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
捐书活动倡议书
2015/04/27 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
python分分钟绘制精美地图海报
2022/02/15 Python
Golang解析JSON对象
2022/04/30 Golang