04 |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
05 |
<title>文字,图片向上滚动效果</title> |
06 |
<style type= "text/css" > |
07 |
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#666; line-height:2em; background:#000;} |
08 |
#rollBox{ height:25px; width:220px; overflow:hidden; border:2px solid #CCC; list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;} |
09 |
#imgRollBox{ height:73px; width:229px; overflow:hidden; border:2px solid #CCC; list-style:none; margin:0; padding:0; position:relative;margin:50px auto; background:#FFf;cursor:pointer;} |
10 |
ul li,ul{ margin:0; padding:0;} |
16 |
<li>[1]hello world i love this job! do you?</li> |
17 |
<li>[2]hello world i love this job! do you?</li> |
18 |
<li>[3]hello world i love this job! do you?</li> |
19 |
<li>[4]hello world i love this job! do you?</li> |
20 |
<li>[5]hello world i love this job! do you?</li> |
23 |
<li><img border= "0" src= "24178817.jpg" name= "page_cnt_3" /></li> |
24 |
<li><img border= "0" src= "24178819.jpg" name= "page_cnt_3" /></li> |
25 |
<li><img border= "0" src= "24178817.jpg" name= "page_cnt_3" /></li> |
26 |
<li><img border= "0" src= "24178819.jpg" name= "page_cnt_3" /></li> |
29 |
<script type= "text/javascript" > |
37 |
run:function(id,delay){ |
38 |
var oLiFirst= this .liArr[0]; |
39 |
var liMarTop = oLiFirst.style.marginTop; |
40 |
var liTopNum=parseInt(liMarTop); |
41 |
var c = Math.abs(liTopNum); |
42 |
if (c< parseInt( this .oUlH)){ |
44 |
oLiFirst.style.marginTop = '-' + c + 'px' ; |
45 |
} else if (Math.abs(liTopNum)== parseInt( this .oUlH)){ |
46 |
clearInterval( this .go); |
47 |
this .oParentUl.removeChild(oLiFirst); |
48 |
this .oParentUl.appendChild(oLiFirst); |
49 |
this .liArr[ this .liArr.length-1].style.marginTop= '0px' ; |
50 |
this .timeout=setTimeout(function(obj,id,childtags,delay){ return function(){obj.start(id,childtags,delay);};}( this ,id, this .childNode,delay),delay); |
54 |
start:function(id,childtags,delay){ |
56 |
this .childNode=childtags; |
57 |
this .oParentUl=document.getElementById(id); |
58 |
this .oUlH= this .oParentUl.currentStyle? this .oParentUl.currentStyle[ 'height' ]:window.getComputedStyle( this .oParentUl, null )[ 'height' ]; |
59 |
this .liArr= this .oParentUl.getElementsByTagName(childtags); |
60 |
for (var i=0;i< this .liArr.length;i++){ |
61 |
this .liArr[i].style.cssText += ';margin-top:0;height:' + this .oUlH+ ';line-height:' + this .oUlH+ ';display:block; width:100%;' ; |
65 |
function(obj,id,delay){ |
66 |
return function(){obj.run(id,delay)} |
68 |
this .oParentUl.onmouseover=function(obj){ return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}( this ); |
69 |
this .oParentUl.onmouseout=function(obj){ return function(){obj.go =setInterval(function(obj,id,delay){ return function(){obj.run(id,delay)};}(obj,id,delay),10);};}( this ); |
73 |
rollText.start( 'rollBox' , 'li' ,1000); |
75 |
clone.prototype= rollText; |
77 |
obj.start( 'imgRollBox' , 'li' ,1000); |
|