`
feiliboos
  • 浏览: 682314 次
文章分类
社区版块
存档分类
最新评论

图片连续循环滚动代码(向上)

 
阅读更多
方法一、

<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
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>


方法二、

<div id="stable_2">
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" >
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">1.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">2.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">3.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">4.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">5.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">6.连续无缝向上滚动</A></TD>
</TR>
<TR>
<TD height="20" colspan="3"><A href="http://blog.csdn.net/vince6799">7.连续无缝向上滚动---结束</A></TD>
</TR>
</TABLE>
</div>
<script type="text/javascript">
function addEventSimple(obj,evt,fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent)
{
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',initScrolling);//保存想要滚动的容器
var scrollingBox;var scrollingInterval;//用于记录是否“滚到头”过一次
var reachedBottom=false;//记录第一次滚到头时候的scrollTopvar bottom;//初始化滚动效果
function initScrolling()
{
scrollingBox = document.getElementById("stable_2");//样式设置,与滚动基本无关,应该用CSS设置。
scrollingBox.style.height = "150px";
scrollingBox.style.overflow = "hidden";//滚动
scrollingInterval = setInterval("scrolling()",50);//鼠标划过停止滚动效果
scrollingBox.onmouseover = over;//鼠标划出回复滚动效果
scrollingBox.onmouseout = out;
}//滚动效果
function scrolling()
{//开始滚动,origin是原来scrollTop
var origin = scrollingBox.scrollTop++;//如果到头了
if(origin == scrollingBox.scrollTop)
{//如果是第一次到头
if(!reachedBottom)
{
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{//已经到头过,只需回复头接尾的效果
scrollingBox.scrollTop=bottom;
}
}
}
function over()
{
clearInterval(scrollingInterval);
}
function out()
{
scrollingInterval = setInterval("scrolling()",50);
}
</script>
分享到:
评论

相关推荐

    图片连续循环滚动代码(向上、下、左、右)

    ### 图片连续循环滚动代码原理 #### 基本思路 该代码的核心思想是利用JavaScript定时器来控制图片的滚动速度,通过不断调整图片容器(即`div`元素)的滚动位置来实现滚动效果。具体来说,是通过动态改变容器的`...

    成批图片单个依次向上循环滚动.rar

    标题中的"成批图片单个依次向上循环滚动"暗示了一个涉及到图像处理和动态展示的技术问题。这可能是关于如何在某种应用程序或网页中实现一个图片轮播效果,其中图片会逐个按照设定的方向(向上)进行循环滚动。这种...

    jQuery实现列表自动滚动循环滚动展示新闻

    5. 循环滚动:当ul元素滚动到最左边时,需要将其位置调整到原始位置,并且继续执行滚动,这样才能实现真正的循环滚动效果。这可以通过判断ul元素的左边界是否已经超出了容器的左边界来实现。如果超出,则将ul元素的...

    无缝隙图片向上滚动JS代码下载

    【标题】"无缝隙图片向上滚动JS代码下载"所涉及的知识点主要集中在JavaScript(JS)编程语言上,尤其是关于图片滚动效果的实现。在网页设计和开发中,为了增加视觉吸引力和用户体验,常会使用JavaScript来创建动态...

    js实现图片的无缝循环滚动

    在探讨“js实现图片的无缝循环滚动”这一主题时,我们深入分析了通过JavaScript和HTML实现图片无缝滚动的技术细节,包括向上、向下以及向右滚动的实现方式。下面,我们将详细解析这一技术的关键知识点。 ### 图片...

    Div块上下左右循环滚动

    【Div块上下左右循环滚动】是一种常见的网页动态效果,它可以使网页中的某个Div元素实现持续不断的循环滚动,增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现,尤其在现代网页设计中,...

    jQuery文字逐行向上滚动代码.zip

    jQuery文字逐行向上滚动代码是一种常见的网页动态效果,它能够使文本内容以逐行上升的方式展示,常用于新闻更新、公告栏或者滚动广告等场景,为网页增添动态视觉效果,吸引用户注意力。在这个"jQuery文字逐行向上...

    图片向上滚动

    根据给定的信息,本文将详细解释“图片向上滚动”这一网页特效的相关知识点,包括其实现原理、HTML与JavaScript代码分析及应用。 ### 实现原理 “图片向上滚动”的特效是通过在网页上创建一个固定高度的容器,并在...

    js图片重复向上滚动.doc

    - **复制内容**:为了达到循环滚动的效果,需要复制一份相同的内容放置于容器内。 - **设置样式**:通过CSS设定容器的尺寸、溢出隐藏属性等,确保只显示一部分内容。 - **控制滚动**:使用JavaScript定时调整容器的...

    js左右滚动代码

    2. **`AutoPlay()`**:该函数用于设置自动向下滚动的定时器,每隔2000毫秒调用一次`ISL_GoDown()`函数并随后执行`ISL_StopDown()`函数,实现循环滚动的效果。 3. **`ISL_GoUp()`与`ISL_GoDown()`**:分别用于启动...

    无缝向上滚动(图片文字效果)

    在网页设计中,"无缝向上滚动(图片文字效果)"是一种流行且吸引用户注意力的动态展示方式。这种技术主要用于创建连续、平滑的滚动动画,让图像和文字以优雅的方式在页面上移动,从而增强用户体验并提升网站的视觉...

    多列文字循环滚动带停顿--萧萱芸梦提供

    标题中的“多列文字循环滚动带停顿”指的是在网页设计中实现的一种特效,它允许文字信息以多列的形式在页面上循环滚动,并且在滚动过程中有停顿效果,这样可以吸引用户的注意力并方便阅读。这种效果常用于网站公告、...

    无缝向上滚动文字代码兼容各种浏览器

    无缝向上滚动文字代码,正如其名,旨在实现一种在页面上连续、平滑且无中断的文字滚动效果,而且这种效果应该能在各种浏览器上正常工作,包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer等。...

    文字间歇向上滚动代码(兼容IE,FF)

    标题“文字间歇向上滚动代码(兼容IE,FF)”表明我们将探讨一个JavaScript实现的解决方案,该方案不仅能在现代浏览器如Firefox中正常工作,而且还能兼容老版本的Internet Explorer(IE)。考虑到IE浏览器曾经的广泛...

    jquery实现的向上无缝循环滚动的新闻效果.zip

    【标题】"jQuery实现的向上无缝循环滚动新闻效果"是一种常见的网页动态展示技术,它能够为网站增添生动性,吸引用户的注意力。这种效果通常应用于新闻网站的头条区、滚动公告栏或者产品展示区域,使得信息能够以连续...

    jQuery点击按钮图片无缝连续滚动适合图片类的网站.zip

    4. **无缝滚动**:在动画结束时,利用jQuery的回调函数,将第一张图片移动到序列的末尾,使用户感觉图片一直在循环滚动,没有尽头。 5. **方向控制**:为了提供前进和后退的控制,可以添加两个按钮,分别处理图片向...

    不间断上下滚动公告代码.rar

    【标签】"JS特效-滚动代码"指明了实现这种功能主要依赖JavaScript编程语言。JavaScript是一种广泛应用于网页交互的客户端脚本语言,它能够直接在用户浏览器上运行,无需服务器支持。通过JavaScript,开发者可以创建...

    文字滚动代码 marquee style="WIDTH: 388px;

    ### 文字滚动代码详解:`&lt;marquee&gt;` 标签及其属性 在网页设计与开发过程中,有时我们需要实现一些简单的动态效果,例如滚动的文字或图片等。这些效果可以通过使用 HTML 的 `&lt;marquee&gt;` 标签来轻松实现。下面将详细...

    JS不间断向上滚动.rar

    标签"JS特效-滚动代码"表明这个压缩包可能包含了实现上述滚动效果的代码示例。通常,这些示例代码会包含HTML结构、CSS样式以及JavaScript逻辑,以便用户可以直接在自己的项目中复用或作为学习参考。文件名称列表没有...

    文字滚动代码教程

    ### 文字滚动代码教程知识点详解 #### 一、引言 在网页设计中,动态效果能够有效提升用户体验,增加页面的吸引力。其中,文字滚动是一种常见的动态效果,它可以通过简单的HTML标签实现。本文将详细介绍如何利用`...

Global site tag (gtag.js) - Google Analytics