不间断滚动代码
Ghost 发表于 [2005-11-15 10:52]
今天在网上找的代码,整理了一下:
-----------------------上下滚动主要部分-------------------------
<!-- 图片宽度width:90 图片高度height:150 背景颜色background:#214984 这些根据你实际的需要修改-->
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 加入要滚动的内容 -->
<!--#include file="GX/PHOTOIMG.htm"--></div>
<div id=demo2></div>
</div>
-----------------------向上滚动-------------------------------
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
-----------------------向下滚动-------------------------------
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
-----------------------左右滚动主要部分--------------------------
<!-- 图片宽度width:90 图片高度height:150 背景颜色background:#214984 这些根据你实际的需要修改-->
<div id=demo style=overflow:hidden;height:100;width:600;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top<!--#include file="GX/PHOTOIMG.htm"-->
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
-----------------------向左滚动-------------------------------
<script>
var speed=30
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>
-----------------------向右滚动-------------------------------
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
---------------------------------------------------------
有一点要注意的是,在实现应用中得算好高度或宽度,不然会出现滚动两次后停止的问题。
分享到:
相关推荐
其中,“js图片不间断滚动代码”是一种常见且实用的功能,它可以让一系列图片在页面上自动连续滚动展示,不仅能够吸引用户注意力,还能有效地节省空间,提高页面美观度。 #### 一、基本原理与实现步骤 1. **创建...
网页中图片的不间断上下左右滚动,下载下来改成HTML文件,插入网页内部,把图片改成自己的就行了
(若内容区域小于显示区域,则自动取消滚动),跳过初始化错误 (避免引起其它滚动的停止),默认值 (除容器ID必选外,其他参数均可根据情况进行选择设置),参数动态赋值,文字滚动不准确 (本次更新主要目的解决此Bug,...
在网页设计中,为了吸引用户的注意力或展示一系列信息,经常使用不间断滚动图片的效果。这种效果通常是通过JavaScript实现的,因为它提供了动态更新页面的能力,而无需重新加载整个页面。本篇文章将详细探讨如何利用...
纯js不间断滚动代码 来源: http://www.cssrain.cn/demo/Class-Of-Marquee-Scroll/MSClass.html 使用方法: 应用说明:页面包含<script type="text/javascript" src="MSClass.js"></script> 创建实例: //参数...
本文将详细探讨"不间断向上滚动代码"这一JS特效,以及如何在实际项目中应用它。 "不间断向上滚动代码"是一种常见的网页动画效果,也称为无限滚动或自动滚动。这种效果使得网页内容能够持续不断地从底部向顶部滚动,...
在IT行业中,"不间断滚动图片"和"滚动文字"是一种常见的网页动态效果,常用于新闻网站、广告展示或产品介绍等场景。这种效果能够吸引用户的注意力,提高信息的传播效率。接下来,我们将深入探讨实现这些效果的技术...
"不间断滚动(无缝滚动)修正版js+css"是一个网页特效技术,主要应用于网站中,使得文本、图片或任何元素能够像跑马灯一样不间断地滚动展示,为页面增添动态效果,提高用户关注度。这种技术通常被称为marquee效果,...
【标签】"JS特效-滚动代码"指明了实现这种功能主要依赖JavaScript编程语言。JavaScript是一种广泛应用于网页交互的客户端脚本语言,它能够直接在用户浏览器上运行,无需服务器支持。通过JavaScript,开发者可以创建...
在网页设计中,图片不间断向左滚动是一种常见的动态效果,常用于展示轮播图或产品展示区域,可以吸引用户注意力并提升用户体验。这种效果通常通过JavaScript实现,因为JavaScript具有强大的DOM操作能力,能够实时...
【标题】:“图片不间断滚动”是一种常见的网页动态效果,它使得一组或多组图片在页面上以循环滚动的方式展示,常用于新闻网站的轮播图、产品展示或网站背景装饰等。这种技术通常结合HTML、CSS和JavaScript来实现,...
网页通用不间断滚动JS是一种常见的网页动态效果,常用于新闻更新、广告展示或公告滚动等场景。这类效果通过JavaScript实现,可以使得文字、图片等内容在页面上持续滚动,增强视觉吸引力和信息传递效率。"Class Of ...
这个“不间断滚动图片JS代码”正是为实现这样的功能而设计的。 首先,我们要了解JavaScript(JS)在网页中的作用。JS是一种轻量级的解释性编程语言,主要负责网页的交互性和动态效果。在这个案例中,JS代码用于控制...
本项目名为“滚屏(图片不间断滚动)通用不间断滚动JS封装类”,旨在实现一种适用于图片的不间断滚动效果,使得图片能够在页面上连续、平滑地滚动,提升用户体验。以下将详细介绍该技术的核心知识点及其应用。 一、...
【标题】:“不间断图片左右滚动代码演示”是一个关于JavaScript(JS)实现的动态图片滚动效果的实例。在网页设计中,这种效果常用于展示产品、新闻或者广告,以吸引用户的注意力并提供良好的用户体验。 【描述】:...
在网页设计中,"不间断向上滚动"是一种常见的特效,它使得页面内容以连续、循环的方式从底部向上滚动,给予用户一种新颖的浏览体验。这种效果在新闻网站、公告栏或者展示大量文本信息的场景中尤为常见。 实现JS不...
在IT行业中,"不间断滚动"(Infinite Scroll)是一种常见的网页设计技术,它允许用户在浏览页面时,无需翻页就能连续加载更多内容。这种设计通常用于社交媒体、电子商务网站和新闻聚合平台,以提供无缝的浏览体验。...
在网页设计中,动态的视觉效果常常能吸引用户的注意力,其中一种常见的效果就是上下不间断轮播的新闻滚动。这种效果可以有效地展示大量的信息,同时保持页面的整洁。本篇文章将详细探讨如何通过原生JavaScript和...
为了实现不间断滚动,我们可以使用JavaScript的`setInterval`函数来定时调整文本的位置。这里我们可以用CSS的`transform`属性来实现平移效果: ```javascript var scrollingText = document.getElementById('...
Marquee Scroll通用不间断滚动JS封装类是一种常见的JavaScript技术,用于实现网页元素的自动滚动效果,常见于新闻滚动、公告栏等场景。这类封装类的主要目的是简化开发者的工作,提供一种便捷的方式来实现不同方向...