网站特效-------旋转的图片
由于近期工作中和個人需要做些網站,原本沒有接觸過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>
利用腳本語言可以使你的頁面更加精彩,在學校有好多東西需要在工作中學,工作中常常會遇到之前沒學過的,
需要我們利用網絡、圖書等手段去不斷學習解決問題,可不要說沒學過了事。呵呵。
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的网站特效-------旋转的图片的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在网页中显示数字时钟
- 下一篇: Shell Sort 希尔排序 收藏