marquee上下左右循环无缝滚动代码
一、横向滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width= "760 " align= "center " border= "1 " >
<tr>
<td align= "center ">
<div id=demo style= 'overflow:hidden;height:110px;width:750px; '>
<table height=110 border=0 cellspacing=0 cellpadding=0>
<tr>
<td id=demo1>
<!-- 下面是你要显示的内容 -->
<table width=780>
<tr>
<td> 第一 </td>
<td> 第二 </td>
<td> 文章标题 </td>
<td> 最牛交通工具 <br> 添 加: <br> 更新时间:2004年10月9日 ' </td>
<td> 经典动物幽默图集 <br> 添 加: <br> 更新时间:2004年10月7日 ' </td>
<td> 新化二中 <br> 添 加: <br> 更新时间:2004年10月7日 ' </td>
</tr>
</table>
<!-- 显示的内容结束! -->
</td>
<td id=demo2> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft <=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</td>
</tr>
</table>
</BODY>
</HTML>
二、纵向滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
<DIV id=rolllinkk1>
<!-- 下面是你要显示的内容 -->
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
</table>
<!-- 显示的内容结束! -->
<DIV align=center> </DIV> </DIV>
<DIV id=rolllinkk2>
<DIV align=center> </DIV> </DIV> </DIV>
<SCRIPT>
var rollspeed=30
rolllinkk2.innerHTML=rolllinkk1.innerHTML //
function Marquee1(){
if(rolllinkk2.offsetTop-rolllinkk.scrollTop <=0) //
rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
else{
rolllinkk.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,rollspeed) //
rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
</SCRIPT>
</td>
</tr>
</table>
</td> </tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
marquee上下左右循环无缝滚动代码的更多相关文章
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图片左右循环连续滚动代码,解决marquee的留白问题
<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- Js上下左右无缝隙滚动代码
转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个 ...
- 替换"marquee",实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
(含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- JavaScript(六)——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- scrollLeft的相关问题(js横向无缝滚动)
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
随机推荐
- CentOS 7.0系统安装配置步骤详解
CentOS 7.0系统是一个很新的版本哦,很多朋友都不知道CentOS 7.0系统是怎么去安装配置的哦,因为centos7.0与以前版本是有很大的改进哦. 说明: 截止目前CentOS 7.x最新版 ...
- Markdown的使用---现学现用
Markdown 是一种轻量级的标记语言,它的的优点很多,在这就不重复说了,最吸引人的应该是它清新简洁的界面,并且语法简单易学.最为常用的语法不会很多,用多了便自然而然的记住了. 可选工具 网上说如果 ...
- 修改Linux用户的UID、GID
对于NFS共享文件,保留文件权限,需要UID.GID与nfs-server端一致! 试验环境:Centos6.5_64/172.24.0.26 01.用户的UID和GID不能被占用 [root@26 ...
- EncodingHelper
/// <summary> /// Url解码 /// </summary> /// <param name="str">原始字符串</p ...
- CSS你可能还不知道的一些知识点
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- 递推 hdu 2064
z[n] n个盘子从1到3次数 先想2个的时候 1->2 2->3 1->2 3->2 2->1 2->3 1->2 2->3 显然 要先把上面n- ...
- 怎么用XMind辅助电商工作
随着电商的迅猛发展,突出了电商运营管理的重要性.能不能做好电商,就要看他的管理做的好不好,全面不全面!电商的突破与进步,离不开全方位的协同管理.之前,小编有给大家介绍过电商量化管理的四大利器:XMin ...
- 架构师养成记--10.master-worker模式
master-worker模式是一种并行计算模式,分为master进程和worker进程两个部分,master是担任总管角色,worker才是执行具体任务的地方. 总体流程应该是这样的: 具体一点,代 ...
- Drop it
FCC题目:队友该卖就卖,千万别舍不得. 让我们来丢弃数组(arr)的元素,从左边开始,直到回调函数return true就停止. 第二个参数,func,是一个函数.用来测试数组的第一个元素,如果返回 ...
- ReactNative 使用微软的CodePush进行热更新,继续填坑
1.别被开发环境骗了 在我们开发react native的时候,一键运行工程,js改了,只要cmd+R就可以刷新了.然后会轻易以为真正app上线的时候也是一样,只要app一打开就是最新的. 其实!这是 ...