zoukankan      html  css  js  c++  java
  • javascript:google向上向下滚动特效,兼容IE6,7,8,FF

    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title></title>
    <style type="text/css">
    #google1,#google2,#google3,#google4
    {border:2px solid #06c;border-left-width:20px;
        width
    :230px;height:40px;margin:10px 0;font-size:12px;
        padding-left
    :20px;overflow:hidden;font-family:Arial;
        background
    :#B7D6E6; 
    }
    ul
    {margin:0px;padding:0px;list-style-type:none;}
    li
    {line-height:20px; color:#06C;}
    </style>
    <body>
     
    <div id="google1">
         
    <ul id="dhooo1">
            
    <li>矢量素材</li>
            
    <li>PSD分层</li>
            
    <li>PNG图标</li>
            
    <li>网页特效源码</li>
            
    <li>高清图片素材</li>
            
    <li>字体下载</li>
            
    <li>dedecms模板</li>
            
    <li>动网模板</li>
            
    <li><span style="color:red">找素材,搜搜呗!</span></li>
            
    <li>www.sosoby.com</li>
         
    </ul>  
     
    </div>
     
    <div id="google2">
         
    <ul id="dhooo2">
            
    <li>矢量素材</li>
            
    <li>PSD分层</li>
            
    <li>PNG图标</li>
            
    <li>网页特效源码</li>
            
    <li>高清图片素材</li>
            
    <li>字体下载</li>
            
    <li>dedecms模板</li>
            
    <li>动网模板</li>
            
    <li><span style="color:red">找素材,搜搜呗!</span></li>
            
    <li>www.sosoby.com</li>
         
    </ul>  
     
    </div>
     
    <div id="google3">
         
    <ul id="dhooo3">
            
    <li>矢量素材</li>
            
    <li>PSD分层</li>
            
    <li>PNG图标</li>
            
    <li>网页特效源码</li>
            
    <li>高清图片素材</li>
            
    <li>字体下载</li>
            
    <li>dedecms模板</li>
            
    <li>动网模板</li>
            
    <li><span style="color:red">找素材,搜搜呗!</span></li>
            
    <li>www.sosoby.com</li>
         
    </ul>  
     
    </div>
     
    <div id="google4">
         
    <ul id="dhooo4">
            
    <li>矢量素材</li>
            
    <li>PSD分层</li>
            
    <li>PNG图标</li>
            
    <li>网页特效源码</li>
            
    <li>高清图片素材</li>
            
    <li>字体下载</li>
            
    <li>dedecms模板</li>
            
    <li>动网模板</li>
            
    <li><span style="color:red">找素材,搜搜呗!</span></li>
            
    <li>www.sosoby.com</li>
         
    </ul>  
     
    </div>
    <script >
    xS
    =function(A,B,C,D,E,F){
        
    var $=function (id){return document.getElementById(id)},Y=+!!F;
        (A
    =$(A)).appendChild((B=$(B)).cloneNode(true));
        (
    function (){
            
    var m=A.scrollTop%C?(E||0):D;
            A.scrollTop
    =[0,B.offsetHeight][Y]==A.scrollTop?[B.offsetHeight-1,1][Y]:(A.scrollTop+[-1,1][Y]);
            setTimeout(arguments.callee,m);
        })()
        
    return arguments.callee;
    }

        xS
        (
    'google1','dhooo1',40,1000,10,1)
        (
    'google2','dhooo2',40,1000,10)
        (
    'google3','dhooo3',40,1,10)
        (
    'google4','dhooo4',40,1,10,1)
    </script>
    </body>
    </html>

    这个代码是我之前带网上找的,因为今天再次用到,所以记录下来,免得以后都找不到,我现在想去搜它的说明文档都搜不到!

    这个代码非常简洁,且浏览器兼容性超好,唯一的问题就是如果你要滚动多条的话就会有问题! 所以需要调参数C 和 样式里面的高度

  • 相关阅读:
    HDU5343:MZL's Circle Zhou(SAM,记忆化搜索DP)
    动归皆背包——那些做过的背包
    CODEVS 3943 数学奇才琪露诺
    codevs 1540 银河英雄传说
    CODEVS 1004四子连棋
    洛谷1082 同余方程
    洛谷1006 传纸条
    洛谷1508 Likecloud-吃、吃、吃
    洛谷1108 低价购买
    洛谷1156 垃圾陷阱
  • 原文地址:https://www.cnblogs.com/xiaopin/p/1796559.html
Copyright © 2011-2022 走看看