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"> ...
随机推荐
- L1-009. N个数求和
https://www.patest.cn/contests/gplt/L1-009 原来写的找了好久还是有一个测试点没过, 虽说是道水题,但是今天一遍就过了还是挺高兴的. 送你机组数据 52/5 4 ...
- web前端（实习生）之“百度二面”
2016.3.18,星期五.我经历了我的第一次面试. 在面完一面之后,面试官说“我对你的考核到这里结束了,我去看一下公司是决定现在就安排二面还是只有再做安排,你先在这里等一下.”我当时就蒙圈了:一是在 ...
- 初识redis数据类型
初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
- JS中字符串的true转化为boolean类型的true
var a="True"; a = eval(a.toLowerCase()); alert(typeof a); //boolean alert(a);//true 正解,eva ...
- angular学习笔记(二十八-附1)-$resource中的资源的方法
通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...
- [LeetCode] Integer Replacement 整数替换
Given a positive integer n and you can do operations as follow: If n is even, replace n with n/2. If ...
- [LeetCode] Integer Break 整数拆分
Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...
- 【已更新】【原创】Chrome53 最新版惊现无厘头卡死 BUG！
发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE.FireFox.Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HT ...
- Spring + SpringMVC + Druid + JPA(Hibernate impl) 给你一个稳妥的后端解决方案
最近手头的工作不太繁重,自己试着倒腾了一套用开源框架组建的 JavaWeb 后端解决方案. 感觉还不错的样子,但实践和项目实战还是有很大的落差,这里只做抛砖引玉之用. 项目 git 地址:https: ...
- 创建ejs模板的express工程
npm install -g express npm install -g express-generator express -e projectName cd projectName npm in ...