Js up seamless scrolling the website announcement effect specific code

  • 2020-03-29 23:47:58
  • OfStack


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title> Headless document </title>
    <style type="text/css">
        <!
        -- #demo
        {
            overflow: hidden;
            width: 220px;
            float: left;
            display: inline;
        }
        #demo ul
        {
            text-align: left;
            margin: 0px;
            padding: 0px;
            width: 220px;
        }
        #demo ul li
        {
            margin-left: 5px;
            display: block;
            list-style: none;
            font-size: 13px;
            height: 26px;
            padding-top: 5px;
        }
        -- ></style>
</head>
<body>
//If you are not sure, you need to customize the input, otherwise if the definition is too high and the li in ul does not reach this height, you will be unable to scroll
    <div id="demo" style="height: 26px;">
        <div id="demo1">
            <ul>
                <li> ・ <a href="//www.jb51.net/ "> Script house. / a> </ li>
                <li> ・ <a href="//www.jb51.net/ "> Script house 2 </ a> </ li>
                <li> ・ <a href="//www.jb51.net/ "> Script house / a> </ li>
                <li> ・ <a href="//www.jb51.net/ "> Script house / a> </ li>
            </ul>
        </div>
        <div id="demo2">
        </div>
        <script type="text/javascript">
//Text uninterrupted scrolling code, compatible with IE, Firefox, Opera
var speed=60;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
        </script>
    </div>
</body>
</html>


Related articles: