首页
所有分类
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 相关文章推荐
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
Oct 11 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 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
cv2(1) ElementTree(1) OpenAI baselines(1) Flask Web(1) tfx(1) tkFileDialog(1) BeautifulSoup4(2) 面向接口(1) exec(1) OpenGL(1)
You might like
「OVERLORD」动画重要删减！雅儿贝德的背叛？至尊猎杀队结成
2020/04/09 日漫
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
js，jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python 实现简单的FTP程序
2019/12/27 Python
Python类中self参数用法详解
2020/02/13 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python能做哪方面的工作
2020/06/15 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
英国最大的专业户外零售商：Mountain Warehouse
2018/06/06 全球购物
struct与class的区别
2014/02/03 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
八年级英语教学反思
2016/02/15 职场文书