飞入
<style type="text/css"> *{ margin:0px auto; padding:0px} #tp{ width:900px; height:400px; overflow:hidden} #img{ position:relative; } </style> </head> <body> <input type="button" value="飞入" onclick="feiru()" /> <input type="button" value="飞出" onclick="feichu()" /> <div id="tp"> <img id="img" style="top:-400px; left:-900px" src="images/201610281326233959.jpg" width="900" height="400px" /> </div> <script type="text/javascript"> function feiru() { fei(); } function fei() { var img = document.getElementById("img"); var topstr = img.style.top; var top = parseInt(topstr.substr(0,topstr.length-2))+4; img.style.top=top+"px"; var leftstr = img.style.left; var left = parseInt(leftstr.substr(0,leftstr.length-2))+9; img.style.left = left+"px"; if(top<-100) { window.setTimeout("fei()",10); } else if(top>=-100 && top<0) { window.setTimeout("fei()",30); } } </script> </body>
滚动
<style type="text/css"> *{ margin:0px auto; padding:0px} </style> </head> <body> <div style="width:100%; height:100px; background-color:#63F"></div> <div id="menu" style="width:100%; height:50px; background-color:#F36;"></div> <input type="button" value="滚动" onclick="gun()" /> <div style="width:100%; height:1000px; background-color:#FF6"></div> </body> <script type="text/javascript"> window.onscroll = function(){ var d = document.getElementById("menu"); if(window.scrollY >= 100) { d.style.position = "fixed"; d.style.top = "0px"; } else { d.style.position = "relative"; } } function gun() { window.scrollTo(0,100); } </script>