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


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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
javascript中indexOf技术详解
May 07 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
Javascript的比较汇总
Jul 25 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
vue3中的组件间通信
Mar 31 Vue.js
关于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
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
取得父标签
2006/11/14 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
鸿星尔克广告词
2014/03/21 职场文书
护士先进个人总结
2015/02/13 职场文书
贫困证明怎么写
2015/06/16 职场文书
各种货币符号快捷输入
2022/02/17 杂记