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"> ...
随机推荐
- OSG3.40 编译时，无法打开输入文件“optimized.lib”
解决方案: 正常情况下,下图中会多出一项:ZLIB_LIBRARY_RELEASE,之后屡次编译,都提示"无法打开输入文件"optimized.lib"" 因为 ...
- html之select标签
循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...
- asp.net mvc 绑定客户端post过来的复杂JSON数据
客户端代码如下: <input type="button" id="btnTest" value="测试" /><br / ...
- 【Pyhon 3】： 170104：优品课堂： GUI -tkinter
from tkinter import * root = Tk() root.title("BMS 图书管理系统") lbl = Label(root, text='书名:') # ...
- css 的一些基本操作
日常基本使用的一些操作,持续完善中: 设置按钮圆角:border-radius:5px; 设置高度:height: 30px; 设置宽度:width: 64px; 使用span标签内容过长自动换行解决 ...
- MySQL练习题
MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...
- ACM提交结果简介
如果你看到红色的"Accepted",那么,恭喜你,你已经成功的解决了该问题! 如果你收到的是如下的信息,则还需要继续检查你的程序: Wrong Answer (WA) : 输出结 ...
- BZOJ 2001: [Hnoi2010]City 城市建设
2001: [Hnoi2010]City 城市建设 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 1132 Solved: 555[Submit][ ...
- 安装了ruby后怎么安装sass
在命令行中输入 ruby -v 查看版本号 先移除默认的https://rubygems.org源,命令为gem sources --remove https://rubygems.org/,按回车 ...
- 【Android群英传】学习笔记（二）
在本篇笔记中,小编将记录关于Android Studio使用过程的小技巧 在下面文章为Android Studio 简称As ① 使用Android Studio第一次创建项目等待时间很长? 原因: ...