首页
所有分类
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 相关文章推荐
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js正则表达式的使用详解
Jul 09 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
easyui validatebox验证
Apr 29 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
DB面试题(126) .NET面试题(131) LINUX面试题(83) C#面试题(90) Android面试题(6) JAVA面试题(401) PHP面试题(54) Oracle面试题(81) 网络工程师面试题(96) C++面试题(199)
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[06:04]DOTA2国际邀请赛纪录片：Just For LGD
2013/08/11 DOTA
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
django连接mysql配置方法总结(推荐)
2018/08/18 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
巴西网上药店：Drogaria Araujo
2021/01/06 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
服务生自我鉴定
2014/01/22 职场文书
求职信模板怎么做
2014/01/26 职场文书
开业庆典主持词
2014/03/21 职场文书
联谊会主持词
2014/03/26 职场文书
小学教师评语大全
2014/04/23 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
党员民主评议个人总结
2014/10/20 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
工程移交协议书
2016/03/24 职场文书
Python django中如何使用restful框架
2021/06/23 Python
springboot入门 之profile设置方式
2022/04/04 Java/Android