不间断循环滚动效果的实例代码(必看篇)
蛮优秀的一段效果代码，可以上下左右滚动，收藏了
<!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>
以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了，希望大家多多支持我们~
相关推荐
-
JS不间断向上滚动效果代码
复制代码 代码如下: <div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/d
-
不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-01-31 (Ver 1.6) 更新说明: + 加入功能 * 修正.完善 1.6.070131 + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1) + 判断是否
-
js不间断滚动的简单实现
CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob
-
JS实现图片的不间断连续滚动的简单实例
js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容
-
非常不错的不间断循环滚动类 兼容多浏览器
调用的方法: 首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行.当然,最好还是下载到你自己的机器上. 复制代码 代码如下: <script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script> 下面是第一种使用方法,看起来似乎比较麻烦一点,但是只需要两行代码: 复制代码 代码如下: var sampleD
-
不间断循环滚动效果的实例代码(必看篇)
蛮优秀的一段效果代码,可以上下左右滚动,收藏了 <!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=&q
-
一个简单的php MVC留言本实例代码(必看篇)
摘要 标题上我把这个留言板叫最简单的,其实应该叫最简陋的,因为把全部注意力集中在MVC模式设计和实现上,所以UI方面几乎没有一点修饰. 这个小程序一共包含6个文件,其中index.php是程序入口.post.htm是留言表单.在lib文件夹里Model.View .Controller三个文件分别实现MVC,DataAccess是一个简单的数据库访问类.其实这个程序是国外的一个人写的. PHP代码: /** * 一个用来访问MySQL的类 * 仅仅实现演示所需的基本功能,没有容错等 * 代码未作
-
JavaScript无缝滚动效果的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
-
Sqlserver事务备份和还原的实例代码(必看)
废话不多说,直接上代码 create database mydb use mydb go create table account( id varchar(16), name varchar(16), balance float ) go select * from account insert into account(id, name, balance) values('620101', 'liyong', 300) insert into account(id, name, balance
-
js图片放大镜实例讲解(必看篇)
1.图片放大镜的思路: 当打开页面时只有图片 首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片 最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
-
基于Bootstrap分页的实例讲解(必看篇)
前面的话 分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式 [默认分页] 平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签
-
js 文本滚动效果的实例代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <style type="text/css"> *{marg
-
iOS模拟中奖名单循环滚动效果
本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true (2)滚动:使用计时器,调整时间及滚动大小,使展示平滑 (3)循环算法:当A列表滚动出界面时,就把它添加在B列表的下面,B列表滚动出界面时,就把它添加在A列表的下面,形成循环效果 3.Swift版
-
JS实用的带停顿的逐行文本循环滚动效果实例
如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实用的带停顿的逐行文本循环
-
JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后