Js实现无缝隙滚动

最新推荐文章于 2024-08-17 21:31:15 发布
最新推荐文章于 2024-08-17 21:31:15 发布
阅读量110 收藏
点赞数
文章标签： xhtml javascript ViewUI

<!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> <body> <div id="demo" style="overflow:hidden;height:215px;"> <div id="demo1"> <a title="" href="#" mce_href="#" target="_blank">aaaa</a><br> <a title="" href="#" mce_href="#" target="_blank">bbbb</a><br> <a title="" href="#" mce_href="#" target="_blank">cccc</a><br> <a title="" href="#" mce_href="#" target="_blank">ddd</a><br> </div> <div id="demo2"></div> </div> <mce:script type="text/javascript"><!-- var speed=50 var demo= document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop>=demo2.offsetHeight) { demo.scrollTop-=demo1.offsetHeight } else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} // --></mce:script> </body> </html>

//横向

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>tangfang</title> </head> <body> <div id="demo" style="overflow:hidden;height:120px;width:600px;color:#ffffff"> <table align=left cellpadding=0 border=0><tr><td id="demo1" valign=top> <table border=0 cellpadding=0 cellspacing=0> <tr> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> <td><img src="http://tangfang9.cn/images/logo.gif" mce_src="http://tangfang9.cn/images/logo.gif" width=150 height=100></td> </tr> </table> </td><td id="demo2" valign=top></td></tr></table></div> <mce:script language="javascript"><!-- var LeftMyMar; var MyMar; var speed=30; function MarqueeLeft() { clearInterval(MyMar) demo2.innerHTML=demo1.innerHTML //向左走 function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } LeftMyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(LeftMyMar)} demo.οnmοuseοut=function() {LeftMyMar=setInterval(Marquee,speed)} } MarqueeLeft(); function MarqueeRight() { clearInterval(LeftMyMar) demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} } // --></mce:script> <a href="#" mce_href="#" onClick="MarqueeLeft()">向左</a> <a href="#" mce_href="#" onClick="MarqueeRight()">向右</a> </body> </html>

iteye_20968
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
10-21
知识点：JS图片左右无缝隙滚动实现 知识点一：兼容性考虑 在介绍的标题中提到“兼容IE,Firefox”，这说明在实现图片左右无缝隙滚动时，需要考虑不同浏览器的兼容性问题。Internet Explorer（IE）和Firefox是两个...
javascript 实现 无缝隙滚动效果
10-11
js 实现 无缝 滚动 特效 只需该图片名称就行啦
文字滚动无间隙代码
web
08-07 1026
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>csdn 博客 招聘滚动信息广告特效</title> <meta http-equiv="author" content="hoojo"> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <meta
js无缝隙滚动
硅步
04-11 480
向上滚动还是向左滚动可用css控制整体容器来实现。     无标题页         #scroll_up     {     height:100px;     width:200px;     border:1px;     border-style:dashed;     overflow:hidden;     }             var
无缝隙滚动
Spring_Monkey
02-02 850
iv id="demo" style="overflow:hidden;height:200px;"> /** * desction:无缝隙滚动 * 原理：先复制一份html 到div2,这样就有了两份，当滚动条 滚动的数值刚好和div1的高度相同的是时候，把滚动值设置为0 这样看起来就好像连续滚动一样 * @param
JS实现上下左右四方向无间隙滚动
weixin_30467087的博客
10-15 94
想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出< marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放 demo1和demo2， demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scroll...
js 向上滚动新闻代码
weixin_34209406的博客
03-11 81
1， &lt;style&gt;a{display:block;font-size:15px};&lt;/style&gt;&lt;div id="div1" style="width:300px;height:68px;overflow:hidden"&gt;&lt;a href="javascript:"&gt;1,你可曾有过无数的梦想，&lt;/a&gt;&am
无缝隙图片向上滚动JS代码下载
11-16
【标题】"无缝隙图片向上滚动JS代码下载"所涉及的知识点主要集中在JavaScript（JS）编程语言上，尤其是关于图片滚动效果的实现。在网页设计和开发中，为了增加视觉吸引力和用户体验，常会使用JavaScript来创建动态...
js实现图片上下无缝隙滚动
03-22
用JS实现图片或文字向上或向下无缝隙滚动
JavaScript实现垂直向上无缝滚动特效代码
10-21
9. 循环向上滚动的文字实现：实际的滚动实现通过JavaScript定时器定时改变dome2层的innerHTML属性，使其内容等于dome1层的内容，再利用CSS样式隐藏dome层中的内容溢出，从而实现了向上滚动的视觉效果。 10. 代码的...
javascript实现图片无缝滚动
T的博客
12-23 828
        可能因为我比较笨，所以我看了很久才看懂这个代码（代码来自于艾特猫的博客：javascript实现图片无缝滚动（scrollLeft的用法介绍））。这里我先贴出代码，然后再放出我的图解。 &lt;!DOCTYPE html &gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无...
js无缝间隙向上滚动
doaram123的博客
05-16 999
css样式： style> #dome{ overflow:hidden; height:250px; padding:5px; } style> "dome" > "dome1"> "express"> ·2010考研英语大纲到货75折... ·权威定本四大名著（人民文... ·口述历
原生js移动端列表无缝间歇向上滚动
weixin_34381687的博客
12-15 2630
在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的margin-top或top在一定间隔内以负值逐渐减小一行的高度的形式来实现，那么今天，我们就通过列表父元素的scrollTop属性来实现这样的效果（其实原理都差不多）。 具体代码如下： &lt...
JavaScript js无间断滚动效果 scrollLeft方法 使用模板
weixin_30262255的博客
07-23 326
JavaScript js无间断滚动效果 scrollLeft方法 使用模板<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title> 无间断滚动scrollLeft套用模板 </title><meta name="Keywords" content=""...
js实现图片滚动
学习的约束力，提醒自己
03-23 3157
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.netvar speed=30;var colee2=document.getElementById("colee2");var cole
html上下无缝滚动弹幕
qq_40750454的博客
03-18 2422
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;News&lt;/title&gt; &lt;style&gt; *{ margin: 0;
Java 图片转PDF的开源库
最新发布
小湘西的博客
08-17 294
Flying Saucer 是一个用于将 XHTML 和 CSS 渲染为 PDF 的库。Apache PDFBox 是一个开源库，用于创建和操作 PDF 文档。如果使用 Maven，可以在。
js实现无缝滚动图效果
05-30
实现无缝滚动图效果的一种常见方式是利用 JavaScript 和 CSS3 动画实现。以下是一个简单的实现方式： HTML 代码： ```html <li><img src="image1.jpg"> <li><img src="image2.jpg"> <li><img src="image3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值