js特效来回旋转的图片
<!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>
<title>js特效来回旋转的图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/<a href=http://111cn.cn/cssdiv/css.html target=_blank >css</a>">
body{background:black}
#p1{position:absolute;height:75px;top:200px;}
</style>
<script type="text/<a href=http://111cn.cn/js_a/js.html target=_blank >javascript</a>">
var left=200;
var img=document.getElementById('p1');
var imgWidth=300;
var pi=Math.PI;
var x=0,temp=0;
function init(){
document.getElementById('p1').style.left=left+'px';
var set=setInterval('goOn()',50);
}
function goOn(){
temp=Math.cos(x);
document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px';
document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px';
if(temp<0){
document.getElementById('p1').style.filter='FlipH(enabled:true)';
}else{
document.getElementById('p1').style.filter='FlipH(enabled:false)';
}
x+=pi/90;
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="imground"><img alt="js特效来回旋转的图片" id="p1" src="/get_pic/20090930091739862.gif"></div>
<script type="text/javascript">init();</script>
</body>
</html>
|
|
