<style type="text/css">
*{ margin:0px auto; padding:0px}
#tp{ 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="100%; height:100px; background-color:#63F"></div>
<div id="menu" style="100%; height:50px; background-color:#F36;"></div>
<input type="button" value="滚动" onclick="gun()" />
<div style="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>