博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
静态网页中的使得文字向上一直滚动,中间不间断。
阅读量:4511 次
发布时间:2019-06-08

本文共 915 字,大约阅读时间需要 3 分钟。

<!--下面是向上滚动代码-->

<div id="colee" style="overflow: hidden; height: 340px; width: 100%; text-align:left;">

<div id="colee1" style="padding-left: 20px; font-size:12px; color:#00469b">

                                            </div>

                                            <div id="colee2">

                                            </div>

                                        </div>

 

          <script type="text/javascript">

                                            var speed = 70;

                                            var colee2 = document.getElementById("colee2");

                                            var colee1 = document.getElementById("colee1");

                                            var colee = document.getElementById("colee");

                                            colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2

                                            function Marquee1() {

                                                //当滚动至colee1与colee2交界时

                                                if (colee2.offsetTop - colee.scrollTop <= 0) {

                                                    colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端

                                                } else {

                                                    colee.scrollTop++

                                                }

                                            }

                                            var MyMar1 = setInterval(Marquee1, speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

                                            colee.onmouseover = function() { clearInterval(MyMar1) }

                                            //鼠标移开时重设定时器

                                            colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }     

                                        </script>

转载于:https://www.cnblogs.com/leaflife/p/6735120.html

你可能感兴趣的文章
最强日期正则表达式
查看>>
get与post区别
查看>>
mysql中级操作
查看>>
python类之魔法方法
查看>>
International Conference for Smart Health 2015 Call for Papers
查看>>
Google Cloud Message for Android(GCM云推送)(译文和开发流程)
查看>>
面向对象编程的介绍:三大特征:封装性, 继承, 多态.
查看>>
netty是什么?
查看>>
微信小店二次开发功能套餐列表
查看>>
Building Modern Web Apps-构建现代的 Web 应用程序(一些感想)
查看>>
2016-2017 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 2016)
查看>>
ubuntu常见错误--Could not get lock /var/lib/dpkg/lock解决
查看>>
springMVC简单示例
查看>>
KMP AC自动机算法
查看>>
叶叶相思化成诗
查看>>
测试页面网络加载耗时
查看>>
Java中变量之局部变量、本类成员变量、父类成员变量的访问方法
查看>>
Java中BIO,NIO,AIO的理解
查看>>
浅谈Sql各种join的用法
查看>>
Durid数据库连接池配置(不使用框架)
查看>>