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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
svg动画之动态描边效果
Feb 22 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
Vue中使用vux配置代码详解
Sep 16 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
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
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python基于socket函数实现端口扫描
2020/05/28 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
大一军训感言
2014/01/09 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
财务负责人任命书
2014/06/06 职场文书
品牌转让协议书
2014/08/20 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
个人借条范本
2015/05/25 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python