`

向左滚动的无间隙JS

阅读更多

 

吾阅:注意,JS脚本必须放在最后,否则不起作用;已经过验证,可使用;

 

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 1000px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>

 

向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<table id="Header1_dlList" cellspacing="0" border="0" style="border-width:0px;border-collapse:collapse;">
 <tr>
  <td>
                      <a href='ViewNews.aspx?id=42' target="_blank">在存储过程里将不同的参数值组合成不同的</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=41' target="_blank">隐藏字段控件的作用是用来存储页面上的值用来向服务器</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=40' target="_blank">存储过程里动态生成包含SQL语句字符串</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=39' target="_blank">4测试滚动公告2紧贴隔5个字第4行</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=38' target="_blank">测试滚动公告2紧贴隔5个字第3行</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=37' target="_blank">测试滚动公告2紧贴隔5个字</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td><td>
                      <a href='ViewNews.aspx?id=36' target="_blank">测试滚动公告</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
 </tr>
</table>
</div>
<div id="demo2"></div>
</div>
</div>


<script> 
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

分享到:
评论

相关推荐

    JS不间断向左滚动无缝隙

    JS不间断向左滚动javascript无缝隙

    无间隙滚动

    HTML 向上和向左滚动的无间隙滚动js.

    字幕 图片 无间隙 滚动

    可以实现图片或文字平滑连续向上或向左滚动 鼠标移动到图片(文字)上停止滚动,移去后继续滚动。 当前图片(文字)数量少于指定数量且图片(文字)总长(宽)度小于指定长(宽)时不进行滚动。 参与滚动的图片...

    marquee无缝隙循环

    向左循环时,除用表格方式外,必须固定宽度,这样就不能动态地添加图片了 当使用`&lt;marquee&gt;`或类似的实现方法时,如果想要实现图片的无缝滚动,通常需要固定元素的宽度。这限制了动态添加图片的功能,因为每次添加...

    JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    3. 使用JavaScript定时器(如`setInterval`)来改变`demo1`的`scrollLeft`值,模拟图片向左或向右滚动的效果。 4. 当`demo1`滚动到与`demo2`的交界处时,重置`scrollLeft`值,使其回到初始位置,由于两个子容器内容...

    js文字横向滚动特效

    如果不是,表示滚动未结束,继续通过增加scroll_div的scrollLeft属性来实现向左滚动。 为了控制滚动效果,我们使用了setInterval函数来定期调用Marquee函数,并设置了一个速度值(speed变量)来控制滚动的速度。...

    符合W3C Web标准的图片连续无间隙水平滚动

    可以创建两个函数,一个用于向左滚动,一个用于向右滚动。通过改变图片的`left`或`right`属性,实现图片的移动。 ```javascript function toleft() { // 实现向左滚动的逻辑 } function clearright() { // ...

    myslideLeftRight 基于jQuery图片左右无缝滚动插件.zip

    这个特性是通过JavaScript编程来控制图片的显示位置,当用户点击左或右箭头时,图片会平滑地向对应方向移动,同时,新的图片会立即加载到滚动的尽头,形成无中断的效果。这一过程涉及到的关键技术包括: 1. **事件...

    javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

    JavaScript四个方向无间隙滚动是一种网页动态效果,常用于新闻滚动、广告轮播等场景,能够为用户呈现流畅的视觉体验。这种滚动效果的关键在于实现元素在不同方向上的平滑移动,同时保持内容不间断,即“无间隙”。在...

    JS左右无缝滚动(一般方法+面向对象方法)

    标题中的"JS左右无缝滚动(一般方法+面向对象方法)"指的是使用JavaScript实现的一种网页元素滚动效果,使得列表项在用户视角中实现无间隙、平滑的左右移动。这种滚动通常用于展示一组项目,如图片轮播或新闻列表,...

Global site tag (gtag.js) - Google Analytics