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


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>

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

Javascript 相关文章推荐
列表内容的选择
Jun 30 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript中的继承之类继承
May 01 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 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
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python基础教程之序列详解
2014/08/29 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python字典对象实现原理详解
2019/07/01 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
几个SQL的面试题
2014/03/08 面试题
感恩母亲节活动总结
2015/02/10 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
详解Vue的options
2021/05/15 Vue.js
TensorFlow的自动求导原理分析
2021/05/26 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript