• 四种JS滚动代码


    1.

    1 <div id="marquees">
    2 <a href="#">你可曾有过无数的梦想</a><br><br>
    3   <a href="#">却在时光的流逝里幻灭</a><br><br>
    4   <a href="#">你可曾对未来期待憧憬</a><br><br>
    5   <a href="#">却在成长的岁月中迷失</a><br><br>
    6  </div>
    7 <script language="JavaScript">
    8 marqueesHeight=200;
    9 stopscroll=false;
    10 with(marquees){
    11 style.width=0;
    12 style.height=marqueesHeight;
    13 style.overflowX="visible";
    14 style.overflowY="hidden";
    15 noWrap=true;
    16 onmouseover=new Function("stopscroll=true");
    17 onmouseout=new Function("stopscroll=false");
    18 }
    19 document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
    20
    21 preTop=0; currentTop=0;
    22
    23 function init(){
    24 templayer.innerHTML="";
    25 while(templayer.offsetHeight<marqueesHeight){
    26 templayer.innerHTML+=marquees.innerHTML;
    27 }
    28 marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
    29 setInterval("scrollUp()",50);
    30 }
    31 document.body.onload=init;
    32
    33 function scrollUp(){
    34 if(stopscroll==true) return;
    35 preTop=marquees.scrollTop;
    36 marquees.scrollTop+=1;
    37 if(preTop==marquees.scrollTop){
    38 marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    39 marquees.scrollTop+=1;
    40 }
    41 }
    42 </script>
    2.

    1 <base href="<a href="http://www.flash8.net" target="_blank">http://www.flash8.net</a>">
    2 <div id=demo style=overflow:hidden;height:100;90;background:#214984;color:#ffffff>
    3 <div id=demo1>
    4 <img src="/images/flash8.gif">
    5 <img src="/images/link/flashempire.gif">
    6 <img src="/images/linklogo/shlogo.gif">
    7 <img src="/images/link/deskcity.gif">
    8 <img src="/images/linklogo/5dmeng.gif">
    9 <img src="<a href="http://www.blueidea.com/logo.gif" target="_blank">http://www.blueidea.com/logo.gif</a>">
    10 <img src="/images/link/flashskylogo.gif">
    11 <img src="/images/link/5dlogo88.gif">
    12 <img src="<a href="http://www.yiiboo.com/cgercn/link.gif" target="_blank">http://www.yiiboo.com/cgercn/link.gif</a>">
    13 </div>
    14 <div id=demo2></div>
    15 </div>
    16
    17
    18
    19 <script>
    20 var speed=30
    21 demo2.innerHTML=demo1.innerHTML
    22 function Marquee(){
    23 if(demo2.offsetTop-demo.scrollTop<=0)
    24 demo.scrollTop-=demo1.offsetHeight
    25 else{
    26 demo.scrollTop++
    27 }
    28 }
    29 var MyMar=setInterval(Marquee,speed)
    30 demo.onmouseover=function() {clearInterval(MyMar)}
    31 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    32 </script>

    3.

    1 <body>
    2 <div style="200px;height:100px;overflow:hidden">
    3 <div id="scroll" style="position:relative;top:0px">
    4 <table border="1">
    5 <tr><td>111</td><td>222</td><td>333</td></tr>
    6 <tr><td>111</td><td>222</td><td>333</td></tr>
    7 <tr><td>111</td><td>222</td><td>333</td></tr>
    8 <tr><td>111</td><td>222</td><td>333</td></tr>
    9 <tr><td>111</td><td>222</td><td>333</td></tr>
    10 <tr><td>111</td><td>222</td><td>333</td></tr>
    11 <tr><td>111</td><td>222</td><td>333</td></tr>
    12 <tr><td>111</td><td>222</td><td>333</td></tr>
    13 <tr><td>111</td><td>222</td><td>333</td></tr>
    14 <tr><td>111</td><td>222</td><td>333</td></tr>
    15 <tr><td>111</td><td>222</td><td>333</td></tr>
    16 </table>
    17 </div>
    18 </div>
    19 <script type="text/javascript">
    20 var obj=document.getElementById("scroll");
    21 var scrollUnit=1; //滚动高度
    22 var interval=100; //时间间隔
    23 setTimeout(scroll,interval);
    24 function scroll()
    25 {
    26 obj.style.pixelTop-=scrollUnit;
    27 setTimeout(scroll,interval);
    28 }
    29 </script>
    30 </body>
    4.js滚屏代码,隔一段时间向上滚动

    1
    2 <html>
    3 <head>
    4 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    5 <style type="text/css">
    6 #icefable1 {
    7 MARGIN-TOP: 2px; BACKGROUND: #494c6e; COLOR: #ffff00; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-DECORATION: none
    8 }
    9 #icefable1 DIV {
    10 PADDING-LEFT: 30px; BACKGROUND: url(../images/index/point_style_00.gif) no-repeat 12px 4px; WIDTH: 350px
    11 }
    12 #icefable1 A:hover {
    13 COLOR: #656a82; LINE-HEIGHT: 26px
    14 }
    15 </style>
    16 </head>
    17 <body>
    18 <DIV id=icefable1>
    19 <DIV>欢迎访问<a href="<a href="http://webym.cn/blog" target="_blank">http://webym.cn/blog</a>" target="_blank"><a href="http://webym.cn/blog" target="_blank">http://webym.cn/blog</a></a></DIV>
    20 <DIV>aidli.com/bbs地理论坛诚征版主中...</DIV>
    21 <DIV>邮箱: yangzhy@163.com</DIV>
    22 <DIV>广告合作:QQ164890072</A>
    23 </DIV>
    24 </DIV>
    25 <SCRIPT>
    26 marqueesHeight=26;
    27 stopscroll=false;
    28 with(icefable1)
    29 {
    30 style.width=0;
    31 style.height=marqueesHeight;
    32 style.overflowX="visible";
    33 style.overflowY="hidden";
    34 noWrap=true;
    35 onmouseover=new Function("stopscroll=true");
    36 onmouseout=new Function("stopscroll=false");
    37 }
    38 preTop=0;
    39 currentTop=marqueesHeight;
    40 stoptime=0;
    41 icefable1.innerHTML+=icefable1.innerHTML;
    42
    43 function init_srolltext()
    44 {
    45 icefable1.scrollTop=0;
    46 setInterval("scrollUp()",1);
    47 }
    48 init_srolltext();
    49
    50 function scrollUp()
    51 {
    52 if(stopscroll==true) return;
    53 currentTop+=1;
    54 if(currentTop==marqueesHeight+1)
    55 {
    56 stoptime+=1;
    57 currentTop-=1;
    58 if(stoptime==300)
    59 {
    60 currentTop=0;
    61 stoptime=0;
    62 }
    63 }
    64 else
    65 {
    66 preTop=icefable1.scrollTop;
    67 icefable1.scrollTop+=1;
    68 if(preTop==icefable1.scrollTop)
    69 {
    70 icefable1.scrollTop=marqueesHeight;
    71 icefable1.scrollTop+=1;
    72 }
    73 }
    74 }
    75 init_srolltext();
    76 </SCRIPT>
    77 </body>
    78 </html>

    aliyun活动 https://www.aliyun.com/acts/limit-buy?userCode=re2o7acl
  • 相关阅读:
    python学习笔记(33)pycharm中使用git
    VUE基础3-过滤器与生命周期
    VUE基础2-双向数据绑定
    VUE基础1方法与指令
    HTML基础之JS
    HTML基础之DOM操作
    HTML基础之CSS
    HTML基础之HTML标签
    python学习笔记(32)多线程&多进程
    python学习笔记(30)深拷贝、浅拷贝
  • 原文地址:https://www.cnblogs.com/wangbin/p/1907642.html
Copyright © 2020-2023  润新知