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"> ...
随机推荐
- Python元组
Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 = ('physi ...
- [LeetCode] Minimum Size Subarray Sum 最短子数组之和
Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...
- knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
- 常用jdbc的url
Microsoft SQL Server Microsoft SQL Server JDBC Driver (一般用来连接 SQLServer 2000) 驱动程序包名:msbase.jar mssq ...
- 【BZOJ-4380】Myjnie 区间DP
4380: [POI2015]Myjnie Time Limit: 40 Sec Memory Limit: 256 MBSec Special JudgeSubmit: 162 Solved: ...
- Python为8bit深度图像应用color map
图片中存在着色版的概念,二维矩阵的每个元素的值指定了一种颜色,因此可以显示出彩色. 迁移调色板 下述python代码将VOC数据集中的某个语义分割的图片的调色板直接应用在一个二维矩阵代表的图像上 #l ...
- xp 下查看进程指令
xp 下快速查看进程及关联 exe 的指令,刚发现,还没有测试 win7 和 win10 支持不支持. wmic process where creationclassname="win32 ...
- Redis Cluster 分区实现原理
Redis Cluster本身提供了自动将数据分散到Redis Cluster不同节点的能力,分区实现的关键点问题包括:如何将数据自动地打散到不同的节点,使得不同节点的存储数据相对均匀:如何保证客户端 ...
- dom 节点篇---模块
改写成如下代码: var creatTag=(function(){ //var count=5; var oUl=document.createElement('ul'); var oDiv=doc ...
- Reset Identity Column Value in SQL Server (Identity Reset)
前言:今天在群里看到有人在问SQL Server自增值重置问题(sqlserver identiy column value reset ) 闲话少说,直接上代码: 正文: --create tabl ...