学做网站培训课程介绍

当前位置:

不间断每次滚动一条数据JS特效制作

有些网站上会出现一些展示栏,它是不间断的向上滚动,而且每次滚动一条数据,当光标指向这个区域时,又会停止滚动。效果图如下:不间断每次滚动一条数据JS特效制作

制作不间断每次向上滚动一条数据滚动特效的步骤:

  1. 在网站上需要显示向上滚动数据效果的位置,放上以下的代码(可以根据自己需要增加数据的数量,就是复制更多的LI标签):
    <div>
    <div id="mq" onmouseover=iScrollAmount=0 style="OVERFLOW: hidden; WIDTH:199px; margin:0 auto; HEIGHT:500px;" onmouseout=iScrollAmount=1>
    <ul>
    <li>
    <div>
    <div><span><nobr><a href="https://www.xuewangzhan.net/">自己建网站</a></nobr></span><em>购买了</em></div>
    <div>09-01 08:10</div>
    </div>
    <div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
    </li>
    <li>
    <div>
    <div><span><nobr><a href="https://www.xuewangzhan.net/jz/html5/">html</a></nobr></span><em>购买了</em></div>
    <div>09-01 08:10</div>
    </div>
    <div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
    </li>  <li>
    <div>
    <div><span><nobr>懒懒de小熊</nobr></span><em>购买了</em></div>
    <div>09-01 08:10</div>
    </div>
    <div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
    </li>
    </ul>
    </div>
    </div>
    <script src="/muqruujs.js" type="text/javascript"></script>
  2. 新建一个JS文件,取名为muqruujs.js,然后将下面的jQuery特效代码复制放入这个JS文件中并保存,保存后上传到自己网站的根目录下。
    var oMarquee = document.getElementById("mq"); //滚动对象
    var iLineHeight = 60; //单行高度,像素
    var iLineCount = 9; //实际行数
    var iScrollAmount = 2; //每次滚动高度,像素
    function run() { oMarquee.scrollTop += iScrollAmount; if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; if ( oMarquee.scrollTop % iLineHeight == 0 ) { window.setTimeout( "run()", 2500 ); } else { window.setTimeout( "run()", 10 ); } } oMarquee.innerHTML += oMarquee.innerHTML; window.setTimeout( "run()", 2500 );
  3. 在自己网站的CSS样式表中,放入以下的CSS样式。用于控制滚动区域的样式。
    .pd5{ padding-top:5px}
    .dis{display:block}
    .undis{display:none}.mqs{ margin:10px auto; width:199px; height:479px; padding-bottom:10px;border:1px solid #DFDFDF}
    #mq{width:199px;height:60px; margin:0 auto; text-align:left;}
    #mq ul{ width:100%;}
    #mq ul li{padding:11px 10px 12px 10px; height:36px; width:179px; overflow:hidden ;text-align:left; border-bottom:1px dashed #CCCCCC }
    #mq ul li .vo1,#mq ul li .vo2{ height:18px; width:100%; overflow:hidden}
    #mq ul li .vo1 .name{ float:left; width:108px; height:18px; line-height:18px}
    #mq ul li .vo1 .name span{ float:left; color:#ED701A; width:68px; height:18px; line-height:18px;overflow:hidden;text-overflow:ellipsis;}
    #mq ul li .vo1 .name span a{ color:#ED701A}
    #mq ul li .vo1 .name em{ float:left; line-height:18px; height:18px; font-style:normal}
    #mq ul li .vo1 .time{ float:right; overflow:hidden; width:68px; text-align:right;line-height:18px; height:18px; color:#888888}
    #mq ul li .vo2{ line-height:18px;text-overflow:ellipsis}

通过以上几次的操作就可以实现不间断每次向上滚动一条数据滚动特效效果。除此以外,我们自己建网站还可以制作图片无缝滚动+鼠标悬停效果。

相关教程:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 有些网站上会出现一些展示栏,它是不间断的向上滚动,而且每次滚动一条数据,当光标指向这个区域时,又会停止滚动。效果图如下:制作不间断每次向上
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • WordPress使用MySQL数据库。作为一个开发者,我们有必要掌握WordPress数据库的基本构造,并在自己的插件或主题中使用他们。截至WordPress3.0,WordP
  • 很多朋友安装xampp之后,启用服务器或者数据库失败,发现端口已经被占用。因为每台电脑占用端口的软件不一样,要如何解决这个问题。第一种解决方
  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽