现在的位置: 首页 > 综合 > 正文

网站特效——-旋转的图片

2013年10月21日 ⁄ 综合 ⁄ 共 1154字 ⁄ 字号 评论关闭

由于近期工作中和个人需要做些网站,原本没有接触过web开发的我,这段时间发现web开发原来这么奇妙!

现在贴出旋转图片的特效,供大家学习!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
tt
</title>
<style type="text/css">
body{background:black}
#p1{position:absolute;height:75px;top:200px;}
</style>
<script type="text/javascript">
var left=200;
var img=document.getElementById('p1');
var imgWidth=286;
var pi=Math.PI;
var x=0,temp=0;
function init(){
document.getElementById('p1').style.left=left+'px';
var set=setInterval('goOn()',40);
}
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 >
<div id="imground">
<img id="p1" src=/teixiao/UploadFiles_4612/200907/20090731103036423.gif alt="网页吧"/>
</div>
<script type="text/javascript">init();</script>
</body>
</html>

利用脚本语言可以使你的页面更加精彩,在学校有好多东西需要在工作中学,工作中常常会遇到之前没学过的,

需要我们利用网络、图书等手段去不断学习解决问题,可不要说没学过了事。呵呵。

抱歉!评论已关闭.