`
joerong666
  • 浏览: 419879 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

图片的连续滚动

prototypeHTML 
阅读更多

<html>
<head></head>
<body>
<script>
function Marquee()
{
this.ID = document.getElementById(arguments[0]);
this.Direction = arguments[1];
this.Step = arguments[2];
this.Width = arguments[3];
this.Height = arguments[4];
this.Timer = arguments[5];
this.WaitTime = arguments[6];
this.StopTime = arguments[7];
if(arguments[8])
  this.ScrollStep = arguments[8]
else
  this.ScrollStep = this.Direction>1 ? this.Width : this.Height;
this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
this.ID.noWrap = true;
this.ID.style.width = this.Width;
this.ID.style.height = this.Height;
this.ClientScroll = this.Direction>1 ? this.ID.scrollWidth : this.ID.scrollHeight;
this.ID.innerHTML += this.ID.innerHTML;
this.Start(this,this.Timer,this.WaitTime,this.StopTime);
}

Marquee.prototype.Start = function(msobj,timer,waittime,stoptime)
{
msobj.StartID = function(){msobj.Scroll()}
msobj.Continue = function()
    {
     if(msobj.MouseOver == 1)
     {
      setTimeout(msobj.Continue,waittime);
     }
     else
     { clearInterval(msobj.TimerID);
      msobj.CTL = msobj.Stop = 0;
      msobj.TimerID = setInterval(msobj.StartID,timer);
     }
    }
msobj.Pause = function()
   {
    msobj.Stop = 1;
    clearInterval(msobj.TimerID);
    setTimeout(msobj.Continue,waittime);
   }
msobj.Begin = function()
{
  msobj.TimerID = setInterval(msobj.StartID,timer);
  msobj.ID.onmouseover = function()
     {
      msobj.MouseOver = 1;
      clearInterval(msobj.TimerID);
     }
  msobj.ID.onmouseout = function()
     {
      msobj.MouseOver = 0;
      if(msobj.Stop == 0)
      {
       clearInterval(msobj.TimerID);
       msobj.TimerID = setInterval(msobj.StartID,timer);
      }
     }
}
setTimeout(msobj.Begin,stoptime);
}
Marquee.prototype.Scroll = function()
{
switch(this.Direction)
{
  case 0:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep & this.WaitTime > 0)
   {
    this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {  
    if(this.ID.scrollTop >= this.ClientScroll)
    {
     this.ID.scrollTop -= this.ClientScroll;
    }
    this.ID.scrollTop += this.Step;
   }
  break;
  case 1:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep & this.WaitTime > 0)
   {
    this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollTop <= 0)
    {
     this.ID.scrollTop += this.ClientScroll;
    }
    this.ID.scrollTop -= this.Step;
   }
  break;
  case 2:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep & this.WaitTime > 0)
   {
    this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollLeft >= this.ClientScroll)
    {
     this.ID.scrollLeft -= this.ClientScroll;
    }
    this.ID.scrollLeft += this.Step;
   }
  break;
  case 3:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep & this.WaitTime > 0)
   {
    this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollLeft <= 0)
    {
     this.ID.scrollLeft += this.ClientScroll;
    }
    this.ID.scrollLeft -= this.Step;
   }
  break;
}
}
-->
</script>
<DIV id=marqueediv6><IMG height=50 hspace=1 src="a.jpg" width=150
border=0><IMG height=50 hspace=1 src="b.jpg" width=150
border=0><IMG height=50 hspace=1 src="c.jpg" width=150
border=0><IMG height=50 hspace=1 src="d.jpg" width=150
border=0><IMG height=50 hspace=1 src="b.jpg" width=150
border=0><IMG height=50 hspace=1 src="b.jpg" width=150
border=0></DIV>
<script>
new Marquee("marqueediv6",2,1,760,52,20,0,0)
</script>
</body>
</html>

分享到：
| C++开发常用工具荟萃
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片连续滚动

    图片连续滚动

    页脚图片连续滚动

    在网页设计中，"页脚图片连续滚动"是一种常见的视觉效果，它通常用于展示一系列相关的图片，如公司产品、服务示例或者动态信息等。这种滚动效果能够吸引用户的注意力，提高用户在页面上的停留时间，同时也能够有效地...

    图片连续滚动无前后空白脚本

    标题与描述中的“图片连续滚动无前后空白脚本”指的是一个网页设计中常见的技术实现，即利用HTML、CSS和JavaScript创建一个无限循环滚动的图片展示效果，并且在滚动过程中不会出现空白区域，确保视觉上的连贯性和...

    JavaScript实现图片连续滚动的案例

    本案例将详细介绍如何使用JavaScript实现图片连续滚动，特别地，我们将关注“MarqueeScrollLeft”这个实现方法，它代表了向左滚动的效果。 首先，我们需要理解基本的HTML结构，用于放置要滚动的图片。通常，我们会...

    网页表格中图片连续滚动

    其中，“网页表格中图片连续滚动”这一技术点，不仅能够增强页面的视觉吸引力，还能有效地利用空间展示更多的信息。本文将详细解析如何在HTML表格中实现图片的连续滚动效果，包括其实现原理、代码详解以及注意事项。...

    广告图片连续滚动代码 html

    总的来说，创建广告图片连续滚动的效果需要HTML构建基本结构，CSS进行样式控制，JavaScript处理动态交互。通过合理组合这三种技术，我们可以创建出具有吸引力的广告轮播组件。当然，实际开发中可能还需要考虑兼容性...

    C# js 图片连续滚动代码

    在IT领域，图片连续滚动是一种常见的网页动态效果，常用于展示产品、新闻或者广告等信息。本主题聚焦于使用C#和JavaScript这两种编程语言来实现这一功能。C#通常用于后端开发，处理数据和逻辑，而JavaScript则常用于...

    JavaScript图片连续滚动效果

    在本主题"JavaScript图片连续滚动效果"中，我们将探讨如何使用JavaScript来创建四种不同的图片滚动效果：向下滚动、向上滚动、向左滚动和向右滚动。这些效果可以提升网站的视觉吸引力，增加用户体验，常用于新闻轮播...

    javascript经典特效---图片连续滚动效果.rar

    在网页设计中，JavaScript经常被用来创建各种视觉特效，其中之一就是图片连续滚动效果。这种效果能够吸引用户的注意力，提升网站的用户体验，常用于展示产品、新闻更新或者广告轮播等场景。 要实现图片连续滚动效果...

    Js图片连续左右滚动.rar

    为了实现连续滚动，我们需要考虑图片的边界情况，当最后一张图片显示后，应该让第一张图片再次出现，这就需要用到数组索引的循环逻辑。 另外，为了增加用户体验，我们还可以添加控制按钮，用户可以通过点击“左”和...

    连续滚动的图片

    **图片连续滚动的关键特性** 1. **不间断**：关键在于图片之间的切换应该是无缝的，即从一张图片的结束到下一张图片的开始，视觉上没有明显的停顿或跳跃。 2. **自动播放**：大多数轮播图都具备自动播放功能，可以...

    js实现图片连续滚动

    利用js实现图片的不间断滚动，可以设置滚动时间、速度，以及滚动的宽度，非常实用

    图片无限连续滚动的js代码

    图片无限连续滚动的实现主要依靠定时器（`setInterval`）和数组概念。首先，将所有要滚动的图片存放在一个数组中，然后通过定时器定期改变图片显示的位置，模拟出滚动效果。 3. **HTML结构**： HTML中通常会有一...

    div+css布局的图片连续滚动js实现代码

    总结起来，这个实例是利用 `div` 和 `css` 创建一个图片连续滚动的布局，通过 `JavaScript` 实现动态滚动效果。开发者可以根据需求调整 CSS 样式和 JavaScript 代码，实现自定义的滚动速度、方向和暂停功能。同时，...

    jQuery连续滚动图片展示.zip

    在实现图片连续滚动时，我们需要创建一个包含所有图片的容器，并设置适当的CSS样式，例如宽度要大于图片总宽度，以便在水平方向上实现无缝滚动。图片通常会被设置为绝对定位，并通过JavaScript动态改变它们的left...

    c#图片滚动代码

    如果需要多张图片连续滚动，可以使用数组或列表存储图片，并在图片滚动出界后加载下一张图片。同时，可能需要记录当前显示的图片索引。 6. **平滑滚动**： 虽然上述方法可以实现基本的滚动效果，但可能看起来不...

    js jquery做的图片连续滚动代码

    在JavaScript与jQuery中，实现图片连续滚动是一种常见的网页动态效果，常用于轮播图或广告展示。此代码段中，开发者遇到了点击图片后返回时出现的问题，这通常与图片滚动的逻辑和状态管理有关。接下来，我们将详细...

    图片无缝滚动.

    它通过编程手段实现在页面上图片连续滚动而不出现间断的效果，使得用户体验更加流畅自然。在给定的文件中，我们看到一个具体的实现案例——图片左右滚动，且已经过测试可以直接调用。下面将对这个案例进行深入分析，...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    无缝滚动则是指当最后一张图片滚动出去后，第一张图片立即跟上，形成一种无中断的效果，为用户带来连续的视觉体验。在JavaScript中，无缝滚动的实现主要依靠对图片位置的精确计算，以及在图片切换时巧妙地调整其显示...

Magicbox
Global site tag (gtag.js) - Google Analytics