您的位置：首页 > 运维架构 > 网站架构

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

2010-09-05 22:44 218 查看

由于近期工作中和个人需要做些网站，原本没有接触过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>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航