开发者社区> 爱六六> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端——旋转的地球

简介: 旋转的地球实现原理:外层的轮廓是球形,里层包含一张世界地图背景,按照一定的时间匀速运动。一、画轮廓支持css3属性border-radius可以其属性,制作球形。ie6-ie8采用蒙版效果。mask样式中将background设置一张中间为圆形全透明的png8图片。
+关注继续查看

旋转的地球
实现原理:外层的轮廓是球形,里层包含一张世界地图背景,按照一定的时间匀速运动。
一、画轮廓
支持css3属性border-radius可以其属性,制作球形。
ie6-ie8采用蒙版效果。mask样式中将background设置一张中间为圆形全透明的png8图片。采用ie识别hack,*包括(ie6,ie7),\0包括(ie8)。
备注:因为上传到博客园中相册中的图片会被修改,所以在ie上看到的效果不对。可以将代码拷贝到本机上并制作一张相同的png8遮罩图片即可,此时运行便能看到效果。

遮罩效果的焦点图

css遮罩

#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);
   }
}

效果图:

旋转的地球示例:

<!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 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{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;} </style> </head> <body> <div id="content"> <div id="mask"></div> <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> </div> <script type="text/javascript"> function $(id){return document.getElementById(id);} var content = $("content"); var oBox = $("box"); var oBoxImg = oBox.getElementsByTagName("img")[0]; var oBoxImgW = oBoxImg.clientWidth; var step = 0; var auto; function moving(){ auto = setInterval(function(){ step--; if(oBox.offsetLeft<=-oBoxImgW){ step=0; } oBox.style.left=step+"px"; },60); } moving(); 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); } } content.onmouseout=function(){ moving(); } </script> </body> </html>


由于chrome下,绝对定位会浮现在相对定位父容器的上方。
改变实现原理采用margin-left属性,修正了chrome浏览器下显示没能显示为圆形。
添加了向左向右两个按钮,同时增加了阴影效果。
===========================================
待完成ie6-ie8下,实现圆形效果。
实现原理,为父容器增加相对定位。子元素采用绝对定位,控制left属性。同时插入div标签蒙版层(png8)图片。
这样便可以实现ie6-ie8下圆形的效果。

<!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;} #box{width: 1200px; height: 300px; margin-left: -300px; margin-top: 0px;} .options{text-align: center;} .options input{padding:3px 15px; cursor: pointer;} </style> </head> <body> <div id="content"> <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);} 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; } oBox.style.marginLeft = step+"px"; },15); } moving(); content.onmousemove=function(event){ clearInterval(auto); } content.onmouseout=function(){ 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>


完善了旋转的地球,模拟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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
企业级训练营火热来袭!速来报名企业运维训练营之云原生和Kubernetes 实战(第1期)~
本训练营涵盖云原生方向学习领域的基础课程与核心课程,是成为云原生运维和实践工程师的必修之路。训练营将通过课程讲授与丰富的动手实验,使得学员对课程理论有更直观和深入的理解,提升学员故障处理与疑难处置的能力。
1741 0
丰田TRI:押宝辅助驾驶系统,首次亮相自动驾驶原型车 | CES 2019
这两项成果背后的推手是美国加州的丰田研究所(TRI)。
466 0
纯 CSS 创作一个太阳、地球、月亮的运转模型
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1053 0
PS图层旋转
选中图层   CTRL+T,旋转,出现旋转柄,自由旋转。   CTRL+S,保存。
672 0
[Unity3d]旋转拖动物体
效果图: 代码: using UnityEngine; using System.Collections; public class DragModel : MonoBehaviour { private float x = 0.
740 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载