首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

不间断循环滚动效果的实例代码(必看篇)

Posted in Javascript onOctober 08, 2016

蛮优秀的一段效果代码，可以上下左右滚动，收藏了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>滚动测试</title>
<script type="text/javascript">
/**
    * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意，只要不重复
    *
    * @para speed 滚动速度 越大越慢
    *
    * @para direction 滚动方向 包括:left,right,down,up
    *
    * @para objWidth 总可见区域宽度
    *
    * @para objHeight 总可见区域高度
    * 
    * @para filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动)
    *
    * @para contentById 对某id为contentById下的内容进行滚动 此滚动与filePath不能共存请注意
    *
    * @para 用法实例 scrollObject("res",50,"up",470,200,"","resource") 对contentById(resource)下内容进行滚动
    *
    * @para 用法实例 scrollObject("res",50,"up",470,200,"d:\\images\\","") 对filePath(images)下内容自动获取并进行滚动,目前只支持ie
    */
    

    var $ =function(id){return document.getElementById(id)}
    // 滚动
function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)
     
     {
        // 执行初始化
if(direction=="up"||direction=="down")
             document.write(UDStructure());
         else
             document.write(LRStructure());
            
         var demo = $(obj);
         var demo1 = $(obj+"1");
         var demo2 = $(obj+"2");
         var speed=speed;
         
         $(contentById).style.display="none"
         
         demo.style.overflow="hidden";
         demo.style.width = objWidth+"px";
         demo.style.height = objHeight+"px";
         demo.style.margin ="0 auto";
         
         if(filePath!="")
            demo1.innerHTML=file();
         
         if(contentById!="")
            demo1.innerHTML=$(contentById).innerHTML;
         
         demo2.innerHTML=demo1.innerHTML;
         

         // 左右滚动
function LRStructure()
         {
             var _html ="";
              _html+="<div id='"+obj+"' >";
              _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
              _html+="<tr>";
              _html+="<td nowrap='nowrap' id='"+obj+"1' >";
                    // 此处是放要滚动的内容
              _html+="</td>";
              _html+="<td nowrap='nowrap' id='"+obj+"2' ></td>";
              _html+="</tr>";
              _html+="</table>";
              _html+="</div>";
            
            return _html;
         }
         
         
         // 上下滚动的结构
function UDStructure()
         {
             var _html ="";
              _html+="<div id="+obj+" >";
              _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
              _html+="<tr>";
              _html+="<td id='"+obj+"1' >";
                  // 此处是放要滚动的内容
              _html+="</td>";
              _html+="</tr>";
              _html+="<tr>";
              _html+="<td id='"+obj+"2' ></td>";
              _html+="</tr>";
              _html+="</table>";
              _html+="</div>";
            return _html;
         }
         
         
         // 取得文件夹下的图片
function file()
         {
            var tbsource = filePath;//本地文件夹路径
            filePath = filePath.toString();
            
            if (filePath=="")
              return"";
  
            var imgList ="";
            var objFSO =new ActiveXObject('Scripting.FileSystemObject');
  
            // 文件夹是否存在
if(!objFSO.FolderExists(tbsource))
            {
                alert("<"+tbsource+">该文件夹路径不存在，或者路径不能含文件名！");
                objFSO =null;
                return;
            }
  
            var objFolder = objFSO.GetFolder(tbsource);
            var colFiles =new Enumerator(objFolder.Files);
            var re_inf1 =/\.jpg$/;  //验证文件夹文件是否jpg文件
  
             for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件
             {
                var objFile = colFiles.item();
              
                if(re_inf1.test(objFile.Name.toLowerCase()))
                {
                  imgList +="<img src="+filePath+"/"+objFile.Name+">";
                }
             }
            
            return imgList;
         }
         
         // 向左滚
function left()
         {
           if(demo2.offsetWidth-demo.scrollLeft<=0)
           {
             demo.scrollLeft-=demo1.offsetWidth;
           }
           else
           {
             demo.scrollLeft++;
           }
         }
         
         
         // 向右滚
function right()
         {
            if(demo.scrollLeft<=0)
            {
              demo.scrollLeft+=demo2.offsetWidth;
            }
            else
            {
              demo.scrollLeft--
            }
         }
         
         
         // 向下滚
function down()
         {
            if(demo1.offsetTop-demo.scrollTop>=0)
            {
              demo.scrollTop+=demo2.offsetHeight;
            }
            else
            {
              demo.scrollTop--
            }
         }
         
         // 向上滚
function up()
         {
            if(demo2.offsetTop-demo.scrollTop<=0)
            {
              demo.scrollTop-=demo1.offsetHeight;
            }
            else
            {
              demo.scrollTop++
            }
         }

         // 切换方向
function swichDirection()
         {
            switch(direction)
            {
              case"left":
                return left();
                break;
              
              case"right":
                return right();
                break;
              
              case"up":
                return up();
                break;
              
              default:
                return down();
            }
         } 

         // 重复执行
var myMarquee=setInterval(swichDirection,speed);
         
         // 鼠标悬停
         demo.onmouseover=function() {clearInterval(myMarquee);}
         
         // 重新开始滚动
         demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);}
    }
</script>

</head>

<body>
<div id="img">
 <table width="1000" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
   <td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/></td>
  </tr>
 </table>
</div>
<script type="text/javascript">
scrollObject("sr",50,"right",800,160,"","img")
</script>

</body>
</html>

以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了，希望大家多多支持三水点靠木~

不间断循环滚动效果的实例代码(必看篇)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 #Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 #Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 #Javascript
JS获取html元素的标记名实现方法
Oct 08 #Javascript
js获取元素的标签名实现方法
Oct 08 #Javascript
什么是JavaScript中的结果值?
Oct 08 #Javascript
Three.js(1) Express(1) GPU(1) HBuilder(1) tree shaking(1) delete in(1) kubernetes(1) 条形码(1) 分布式追踪(1) group by(1)
You might like
php 数学运算验证码实现代码
2009/10/11 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
独特的python循环语句
2016/11/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python如何代码集体右移
2020/07/20 Python
瑞士灯具购物网站：Lampenwelt.ch
2018/07/08 全球购物
知识竞赛主持词
2014/03/26 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
招标授权委托书样本
2014/09/23 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers