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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
yii使用bootstrap分页样式的实例
2017/01/17 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
javascript常用函数(2)
2015/11/05 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python set集合类型操作总结
2014/11/07 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python如何修改装饰器中参数
2018/03/20 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
总务岗位职责
2013/11/19 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
销售助理岗位职责
2014/02/21 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
法定代表人资格证明书
2015/06/18 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
话题作文之成长
2019/12/09 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers