首页
所有分类
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 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 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
JDK(1) 云服务器(1) 数据备份(2) 腾讯云(1) Foreign Key(1) expdp(1) 外键约束(1) queue(1) Vite(1) 内存池(1)
You might like
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
微信小程序 侧滑删除（左滑删除）
2017/05/23 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue实现短信验证码登录功能（流程详解）
2019/12/10 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python多线程编程（四）：使用Lock互斥锁
2015/04/05 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python实现八大排序算法（1）
2017/09/14 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python实现学生信息管理系统
2020/04/05 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
如何利用python进行时间序列分析
2020/08/04 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
建筑设计师岗位职责
2013/11/18 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
工作表扬信范文
2015/01/17 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
初中班长竞选稿
2015/11/20 职场文书