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 和 样式里面的高度

 

posted @ 2010-08-10 15:22  PPDev  阅读(595)  评论(0编辑  收藏  举报