旋轉的地球
實現原理：外層的輪廓是球形，里層包含一張世界地圖背景，按照一定的時間勻速運動。
一、畫輪廓
支持css3屬性border-radius可以其屬性，制作球形。
ie6-ie8采用蒙版效果。mask樣式中將background設置一張中間為圓形全透明的png8圖片。采用ie識別hack，*包括（ie6，ie7），\0包括（ie8）。
備注：因為上傳到博客園中相冊中的圖片會被修改，所以在ie上看到的效果不對。可以將代碼拷貝到本機上並制作一張相同的png8遮罩圖片即可，此時運行便能看到效果。
#content{width: 300px; height: 300px; border-radius: 150px; overflow:hidden; margin: 80px auto 0px; position: relative;} #mask{width: 300px; height: 300px; position: absolute; top: 0px; left: 0px;
*background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_round.png) center no-repeat;
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_round.png) center no-repeat\0;
z-index:999}
二、地球旋轉
將box設置為相對容器絕對定位，並在box中放兩個img標簽同樣絕對定位。采用兩個img的作用是當第一個圖片旋轉到最后的時候，不會出現空白不連貫的現象。
html結構部分：
<div id="box"> <img class="img1" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_earth.jpg" /> <img class="img2" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_earth.jpg" /> </div>
css樣式部分：
#box{position: absolute; left:0px; top: 0px;} #box img{width:800px; height: 300px;} #box .img1{position: absolute; top: 0px; left: 0px;} #box .img2{position: absolute;top:0px; left: 800px;}
通過控制box的left屬性的變化，實現地球旋轉的效果。
js代碼：
function moving(){ auto = setInterval(function(){ step--; if(oBox.offsetLeft<=-oBoxImgW){ step=0; } oBox.style.left=step+"px"; },60); }
三、鼠標移動上，停止旋轉
如果支持css3的border-radius屬性，在父容器上使用事件onmouseover為其添加clearInterval方法即可。
但是在ie6-ie8上鼠標移動到父容器中的空白部分地球便停止了運動。
於是采用為父容器添加onmousemove事件，非ie6-ie8依然使用clearInterval方法。
ie6-ie8通過計算坐標的位置來判斷是否在這個圓形輪廓內。鼠標指針在觸發事件元素內的坐標位置減去圓形的坐標位置的平方和小於圓的半徑的平方時，說明鼠標在圓形輪廓內，地球便地址運動。
js代碼：
content.onmousemove=function(event){ if(!(navigator.appVersion.match(/9./i)=="9.")&&(navigator.appVersion.match(/MSIE/gi)=="MSIE")){ event = event || window.event; var x = event.offsetX; var y = event.offsetY; var tmp =Math.abs(x-150)*Math.abs(x-150)+Math.abs(y-150)*Math.abs(y-150); if(tmp<150*150){ clearInterval(auto); } } else{ clearInterval(auto); } }
效果圖：
旋轉的地球示例：
由於chrome下，絕對定位會浮現在相對定位父容器的上方。
改變實現原理采用margin-left屬性，修正了chrome瀏覽器下顯示沒能顯示為圓形。
添加了向左向右兩個按鈕，同時增加了陰影效果。
===========================================
待完成ie6-ie8下，實現圓形效果。
實現原理，為父容器增加相對定位。子元素采用絕對定位，控制left屬性。同時插入div標簽蒙版層（png8）圖片。
這樣便可以實現ie6-ie8下圓形的效果。
完善了旋轉的地球，模擬3d可以為圓心輪廓增加一層暗透明陰影。
<!DOCTYPE html> <html> <head> <title>旋轉的地球</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> *{margin:0px;padding: 0px;} #content{width: 300px; height: 300px; border-radius: 150px;overflow: hidden; margin: 80px auto 20px;
box-shadow: -1px 1px 1px #000000; position:relative\0; *position:relative;} #mask{width: 300px\0; height: 300px\0; *width: 300px; *height: 300px; z-index:999; position: absolute\0; top: 0px\0; left: 0px\0;
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_round.png) center no-repeat\0; *position: absolute; *top: 0px; *left: 0px;
*background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_round.png) center no-repeat; } #box{width: 1200px; height: 300px; margin-left: -300px; margin-top: 0px; margin-left: 0px\0;position: absolute\0; top: 0px\0; left: -300px\0; *margin-left: 0px; *position: absolute; *top: 0px; *left: -300px; } .options{text-align: center;} .options input{padding:3px 15px; cursor: pointer;} </style> </head> <body> <div id="content"> <div id="mask"></div> <div id="box"> <img width="1200" height="300" alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_mearth.jpg" /> </div> </div> <div class="options">
<input id="mleft" style="margin-right: 40px;" type="button" value="向左" />
<input id="mright" type="button" value="向右" />
</div> <script type="text/javascript"> function $(id){return document.getElementById(id);} function isIE(){ if(navigator.appVersion.match(/MSIE/gi)=="MSIE"){ return true; } else{ return false; } } function isIE6_8(){ if(!(navigator.appVersion.match(/9./i)=="9.")&&isIE()){ return true; } else{ return false; } } var content = $("content"); var oBox = $("box"); var mleft = $("mleft"); var mright = $("mright"); var step = -300; var bstep = true; var auto; function moving(){ auto = setInterval(function(){ if(bstep){ step--; } else{ step++; } if(step<-900){ step=-300; } if(step>-300){ step=-900; } if(!isIE6_8()){ oBox.style.marginLeft = step+"px"; } else{ oBox.style.left=step+"px"; } },15); } moving(); content.onmousemove=function(event){ if(isIE6_8()){ event = event || window.event; var x = event.offsetX; var y = event.offsetY; var tmp =Math.abs(x-150)*Math.abs(x-150)+Math.abs(y-150)*Math.abs(y-150); if(tmp<150*150){ clearInterval(auto); } } else{ clearInterval(auto); } } content.onmouseout=function(event){ moving(); } mleft.onclick=function(){ bstep = true; content.style.boxShadow="-1px 1px 1px #000000"; content.style.box_Shadow="-1px 1px 1px #000000"; } mright.onclick = function(){ bstep = false; content.style.boxShadow="1px 1px 1px #000000"; content.style.box_Shadow="1px 1px 1px #000000"; } </script> </body> </html>