网页设计实战3 ufo类型的科技网页如何实现

网页设计实战3 ufo类型的科技网页如何实现

大家好,又见面了,我是你们的朋友全栈君。

网页设计实战3 ufo类型的科技网页如何实现

一、总结

一句话总结:基础的图片素材就是如何几张图片,这个效果只是通过jquery或者js让那个png图片旋转起来了,如此而已。其实核心就是一个transform的rotateY属性而已。

 

 

二、ufo类型的科技网页如何实现

1、相关知识

网页设计实战3 ufo类型的科技网页如何实现

 

 

基础的图片素材就是如何几张图片:

网页设计实战3 ufo类型的科技网页如何实现

 

说明这个效果只是通过jquery或者js让那个png图片旋转起来了

 

 

 

2、代码

index.html

网页设计实战3 ufo类型的科技网页如何实现
网页设计实战3 ufo类型的科技网页如何实现

 1 <!DOCTYPE html>  2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  3 <meta charset="UTF-8">  4 <title>行业智慧能力平台</title>  5 <link rel="stylesheet" type="text/css" href="css/style2.0.css">  6 <style type="text/css">  7  ul li{ font-size: 30px;color:#2ec0f6;}  8  .tyg-div{ z-index:-1000;float:left;position:absolute;left:5%;top:20%;}  9  .tyg-p{   10  font-size: 14px;  11  font-family: 'microsoft yahei';  12  position: absolute;  13  top: 135px;  14  left: 60px;  15 }  16  .tyg-div-denglv{   17  z-index:1000;float:right;position:absolute;right:3%;top:10%;  18 }  19  .tyg-div-form{   20  background-color: #23305a;  21  width:300px;  22  height:auto;  23  margin:120px auto 0 auto;  24  color:#2ec0f6;  25 }  26  .tyg-div-form form { padding:10px;}  27  .tyg-div-form form input[type="text"]{   28  width: 270px;  29  height: 30px;  30  margin: 25px 10px 0px 0px;  31 }  32  .tyg-div-form form button {   33  cursor: pointer;  34  width: 270px;  35  height: 44px;  36  margin-top: 25px;  37  padding: 0;  38  background: #2ec0f6;  39  -moz-border-radius: 6px;  40  -webkit-border-radius: 6px;  41  border-radius: 6px;  42  border: 1px solid #2ec0f6;  43  -moz-box-shadow:  44  0 15px 30px 0 rgba(255,255,255,.25) inset,  45  0 2px 7px 0 rgba(0,0,0,.2);  46  -webkit-box-shadow:  47  0 15px 30px 0 rgba(255,255,255,.25) inset,  48  0 2px 7px 0 rgba(0,0,0,.2);  49  box-shadow:  50  0 15px 30px 0 rgba(255,255,255,.25) inset,  51  0 2px 7px 0 rgba(0,0,0,.2);  52  font-family: 'PT Sans', Helvetica, Arial, sans-serif;  53  font-size: 14px;  54  font-weight: 700;  55  color: #fff;  56  text-shadow: 0 1px 2px rgba(0,0,0,.1);  57  -o-transition: all .2s;  58  -moz-transition: all .2s;  59  -webkit-transition: all .2s;  60  -ms-transition: all .2s;  61 }  62 </style>  63 <body>  64 <div class="tyg-div">  65 <ul>  66 <li></li>  67 <li><div style="margin-left:20px;"></div></li>  68 <li><div style="margin-left:40px;"></div></li>  69 <li><div style="margin-left:60px;"></div></li>  70 <li><div style="margin-left:80px;"></div></li>  71 <li><div style="margin-left:100px;"></div></li>  72 <li><div style="margin-left:120px;"></div></li>  73 </ul>  74 </div>  75 <div id="contPar" class="contPar">  76 <div id="page1" style="z-index:1;">  77 <div class="title0">行业智慧能力平台</div>  78 <div class="title1">旅游、交通、气象、公共安全、大数据</div>  79 <div class="imgGroug">  80 <ul>  81 <img alt="" class="img0 png" src="./img/page1_0.png">  82 <img alt="" class="img1 png" src="./img/page1_1.png">  83 <img alt="" class="img2 png" src="./img/page1_2.png">  84 </ul>  85 </div>  86 <img alt="" class="img3 png" src="./img/page1_3.jpg">  87 </div>  88 </div>  89 <div class="tyg-div-denglv">  90 <div class="tyg-div-form">  91 <form action="">  92 <h2>登录</h2><p class="tyg-p">欢迎访问 智慧能力</p>  93 <div style="margin:5px 0px;">  94 <input type="text" placeholder="请输入账号..."/>  95 </div>  96 <div style="margin:5px 0px;">  97 <input type="text" placeholder="请输入密码..."/>  98 </div>  99 <div style="margin:5px 0px;"> 100 <input type="text" style="width:150px;" placeholder="请输入验证码..."/> 101 <img src="./img/1.png" style="vertical-align:bottom;" alt="验证码"/> 102 </div> 103 <button type="submit" ><span style="width:20px;"></span></button> 104 </form> 105 </div> 106 </div> 107 108 More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> 109 <script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script> 110 <script type="text/javascript" src="./js/com.js"></script> 111 <!--[if IE 6]> 112 <script language="javascript" type="text/javascript" src="./script/ie6_png.js"></script> 113 <script language="javascript" type="text/javascript"> 114 DD_belatedPNG.fix(".png"); 115 </script> 116 <![endif]--> 117 118 119 </body> 120 </html>

View Code

 

com.js

网页设计实战3 ufo类型的科技网页如何实现
网页设计实战3 ufo类型的科技网页如何实现

 1 !function(a){ function b(b){ var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=0,g=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),g=e,void 0!==c.axis&&c.axis===c.HORIZONTAL_AXIS&&(g=0,f=-1*e),void 0!==c.wheelDeltaY&&(g=c.wheelDeltaY/120),void 0!==c.wheelDeltaX&&(f=-1*c.wheelDeltaX/120),d.unshift(b,e,f,g),(a.event.dispatch||a.event.handle).apply(this,d)}var c=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var d=c.length;d;)a.event.fixHooks[c[--d]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){ if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],b,!1);else this.onmousewheel=b},teardown:function(){ if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],b,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){ return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){ return this.unbind("mousewheel",a)}})}(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){ return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){ return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){ return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){ return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){ return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){ return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){ return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){ return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){ return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){ return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){ return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){ return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){ return 0==b?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){ return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){ return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){ return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){ var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin(2*(b*e-f)*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin(2*(b*e-f)*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){ var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=.3*e*1.5),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin(2*(b*e-f)*Math.PI/g)+c:h*Math.pow(2,-10*(b-=1))*Math.sin(2*(b*e-f)*Math.PI/g)*.5+d+c},easeInBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){ return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?7.5625*d*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeInOutBounce:function(a,b,c,d,e){ return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}}),function(a){function b(a){return"object"==typeof a?a:{top:a,left:a}}var c=a.scrollTo=function(b,c,d){a(window).scrollTo(b,c,d)};c.defaults={axis:"xy",duration:parseFloat(a.fn.jquery)>=1.3?0:1,limit:!0},c.window=function(){return a(window)._scrollable()},a.fn._scrollable=function(){return this.map(function(){var b=this,c=!b.nodeName||-1!=a.inArray(b.nodeName.toLowerCase(),["iframe","#document","html","body"]);if(!c)return b;var d=(b.contentWindow||b).document||b.ownerDocument||b;return/webkit/i.test(navigator.userAgent)||"BackCompat"==d.compatMode?d.body:d.documentElement})},a.fn.scrollTo=function(d,e,f){return"object"==typeof e&&(f=e,e=0),"function"==typeof f&&(f={onAfter:f}),"max"==d&&(d=9e9),f=a.extend({},c.defaults,f),e=e||f.duration,f.queue=f.queue&&f.axis.length>1,f.queue&&(e/=2),f.offset=b(f.offset),f.over=b(f.over),this._scrollable().each(function(){ function g(a){j.animate(l,e,f.easing,a&&function(){a.call(this,d,f)})}if(null!=d){ var h,i=this,j=a(i),k=d,l={},m=j.is("html,body");switch(typeof k){ case"number":case"string":if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(k)){k=b(k);break}if(k=a(k,this),!k.length)return;case"object":(k.is||k.style)&&(h=(k=a(k)).offset())}a.each(f.axis.split(""),function(a,b){ var d="x"==b?"Left":"Top",e=d.toLowerCase(),n="scroll"+d,o=i[n],p=c.max(i,b);if(h)l[n]=h[e]+(m?0:o-j.offset()[e]),f.margin&&(l[n]-=parseInt(k.css("margin"+d))||0,l[n]-=parseInt(k.css("border"+d+"Width"))||0),l[n]+=f.offset[e]||0,f.over[e]&&(l[n]+=k["x"==b?"width":"height"]()*f.over[e]);else{ var q=k[e];l[n]=q.slice&&"%"==q.slice(-1)?parseFloat(q)/100*p:q}f.limit&&/^\d+$/.test(l[n])&&(l[n]=l[n]<=0?0:Math.min(l[n],p)),!a&&f.queue&&(o!=l[n]&&g(f.onAfterFirst),delete l[n])}),g(f.onAfter)}}).end()},c.max=function(b,c){var d="x"==c?"Width":"Height",e="scroll"+d;if(!a(b).is("html,body"))return b[e]-a(b)[d.toLowerCase()]();var f="client"+d,g=b.ownerDocument.documentElement,h=b.ownerDocument.body;return Math.max(g[e],h[e])-Math.min(g[f],h[f])}}(jQuery),function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var e,f=b||window.event,g=[].slice.call(arguments,1),h=0,i=0,j=0,k=0,l=0;return b=a.event.fix(f),b.type="mousewheel",f.wheelDelta&&(h=f.wheelDelta),f.detail&&(h=-1*f.detail),f.deltaY&&(j=-1*f.deltaY,h=j),f.deltaX&&(i=f.deltaX,h=-1*i),void 0!==f.wheelDeltaY&&(j=f.wheelDeltaY),void 0!==f.wheelDeltaX&&(i=-1*f.wheelDeltaX),k=Math.abs(h),(!c||c>k)&&(c=k),l=Math.max(Math.abs(j),Math.abs(i)),(!d||d>l)&&(d=l),e=h>0?"floor":"ceil",h=Math[e](h/c),i=Math[e](i/d),j=Math[e](j/d),g.unshift(b,h,i,j),(a.event.dispatch||a.event.handle).apply(this,g)}var c,d,e=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],f="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"];if(a.event.fixHooks)for(var g=e.length;g;)a.event.fixHooks[e[--g]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){ if(this.addEventListener)for(var a=f.length;a;)this.addEventListener(f[--a],b,!1);else this.onmousewheel=b},teardown:function(){ if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],b,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){ return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){ return this.unbind("mousewheel",a)}})}),  2 $(document).ready(function(){  3  mainObj.init(),mainObj.resizeFn(),  4 $(window).resize(function(){mainObj.resizeFn()}),  5 mainObj.judgeBro()&&($("#style").attr("href","css/style_ie2.0.css"),  6 mainObj.scrollSetPos(),$(window).scroll(function(){mainObj.scrollSetPos()})),  7 setTimeout(function(){  8 var a=window.location.href,b=a.split("#@");  9 mainObj.scroll_To(b.length>1?parseInt(b[1]):0)  10 },200),  11 $(document).mousewheel(function(a,b){  12 a=a||window.event,  13  a.preventDefault(),  14 0>b?mainObj.scroll_To(mainObj.getNextSuffix(!0)):0!=mainObj.suffix&&mainObj.  15 scroll_To(mainObj.getNextSuffix(!1))  16  }),  17 $(document).keydown(function(a){  18 40==a.keyCode?mainObj.scroll_To(mainObj.getNextSuffix(!0)):38==a.which&&0!=mainObj.suffix&&mainObj.scroll_To(mainObj.getNextSuffix(!1))  19  })  20 });  21 var mainObj={  22 suffix:0,  23 $par:$("#contPar"),  24 $menu:$("#btnlistpar"),  25 $btnNext:$(".btn-down"),  26 $btnPrev:$(".btn-up"),  27 anitime:600,  28 ifScroll:1,  29 doOne:1,  30  subCls:{  31 def:"cont",  32 clsArr:["cont_0","cont_1","cont_2"],  33 clsRespArr:["resp0","resp1"]  34  },  35 init:function(){  36 if(this.is_pc()){  37 var a=this.$par.children().eq(0),  38 b=a.find(".img1,.img2"),  39 c=a.find(".img6,.img7"),  40 d=a.find(".img3"),  41 e=a.find(".img4"),  42 f=a.find(".img5"),  43 g={  44 margin_left:parseInt(a.find(".img1").css("margin-left")),  45 margin_top:parseInt(a.find(".img1").css("margin-top"))  46  },  47 h={  48 margin_left:parseInt(a.find(".img6").css("margin-left")),  49 margin_top:parseInt(a.find(".img6").css("margin-top"))  50  },  51 i={  52 margin_left:parseInt(a.find(".img3").css("margin-left")),  53 margin_top:parseInt(a.find(".img3").css("margin-top"))  54  },  55 j={  56 margin_left:parseInt(a.find(".img4").css("margin-left")),  57 margin_top:parseInt(a.find(".img4").css("margin-top"))  58  },  59 k={  60 margin_left:parseInt(a.find(".img5").css("margin-left")),  61 margin_top:parseInt(a.find(".img5").css("margin-top"))  62  };  63 a.mousemove(function(a){  64 var l=mainObj.getWinW(),  65 m=mainObj.getWinH(),  66 n=a.screenX,  67 o=a.screenY,  68 p=.03*(n-l/2),  69 q=.02*(o-m/2);  70  b.css({  71 "margin-left":g.margin_left-.3*p+"px",  72 "margin-top":g.margin_top-.3*q+"px"}),  73 c.css({"margin-left":h.margin_left-.3*p+"px","margin-top":h.margin_top-.3*q+"px"}),  74 d.css({"margin-left":i.margin_left+1.2*p+"px","margin-top":i.margin_top+1.2*q+"px"}),  75 e.css({"margin-left":j.margin_left-1.2*p+"px","margin-top":j.margin_top-1.2*q+"px"}),  76 f.css({"margin-left":k.margin_left-.6*p+"px","margin-top":k.margin_top-.6*q+"px"})})  77 }else  78 this.$menu.hide(),  79 this.$btnNext.show().click(function(){  80 mainObj.scroll_To(mainObj.getNextSuffix(!0))  81  }),  82 this.$btnPrev.click(function(){  83 0!=mainObj.suffix&&mainObj.scroll_To(mainObj.getNextSuffix(!1))  84  }),  85 $(document).bind("touchmove",function(a){a.preventDefault()}),  86 $("img").bind("touchend",function(a){a.preventDefault()});  87 $("img").each(function(){  88 var a=$(this).attr("data-src");  89 null!=a&&$(this).attr("src",a).removeAttr("data-src").addClass("png")  90  })  91  },  92 resizeFn:function(){  93 var a=this.getWinH(),  94 b=this.getWinW();  95 this.$par.children().css({height:a+"px"}),  96  mainObj.reScrollTop();  97 var c=this.$par.children().eq(0),  98 d=mainObj.subCls.clsRespArr[0],  99 e=mainObj.subCls.clsRespArr[1]; 100 switch(!0){ 101 case 780>b||780>a:c.addClass(d).removeClass(e); 102 break; 103 case 1024>b||850>a:c.addClass(e).removeClass(d); 104 break; 105 default:c.removeClass(e).removeClass(d) 106  } 107  }, 108 reScrollTop:function(){ 109 $(document).scrollTop(mainObj.$par.children().eq(mainObj.suffix)[0].offsetTop) 110  }, 111 getWinW:function(){ return $(window).width()}, 112 getWinH:function(){ return $(window).height()}, 113 scroll_To:function(a){ 114 if(this.ifScroll){ 115 this.changeCls(a),this.suffix=a,this.ifScroll=0; 116 var b=this.$par.children().eq(a); 117 mainObj.judgeBro()||3==mainObj.suffix||mainObj.$par.children().eq(3).find(".img0").css("opacity",0), 118  $.scrollTo(b,{ 119 duration:800, 120 easing:"easeInOutExpo", 121 axis:"y", 122 onAfter:function(){ 123 switch(b.addClass(mainObj.subCls.clsArr[1]).removeClass(mainObj.subCls.clsArr[0]).removeClass(mainObj.subCls.clsArr[2]), 124 mainObj.$menu.children().eq(a).addClass("sel").siblings().removeClass("sel"), 125 mainObj.judgeBro()||(4==mainObj.suffix?b.find(".imgDel").css("opacity",1):mainObj.$par.children().eq(4).find(".imgDel").css("opacity",0), 126 3==mainObj.suffix&&setTimeout(function(){ 127 b.find(".img0").css("opacity",1) 128 },500)), 129  mainObj.suffix){ 130 case 0:mainObj.anitime=0; 131 break; 132 case 4:mainObj.anitime=1e3; 133 break; 134 default:mainObj.anitime=600 135  } 136 mainObj.is_pc()||(0==mainObj.suffix?mainObj.$btnPrev.hide():mainObj.$btnPrev.show(),1==mainObj.suffix&&mainObj.reScrollTop()), 137 setTimeout(function(){mainObj.ifScroll=1},mainObj.anitime) 138  } 139  }) 140  } 141  }, 142 getNextSuffix:function(a){ 143 var b=this.$par.children().length, 144 c=this.suffix; 145 return c=a?b>c+1?c+1:0:c-1>=0?c-1:b-1 146  }, 147 changeCls:function(a){ 148 this.$par.children().each(function(b){ 149 var c=mainObj.subCls.clsArr[0],d=mainObj.subCls.clsArr[1],e=mainObj.subCls.clsArr[2]; 150 a>b?$(this).addClass(c).removeClass(d).removeClass(e):b>a&&$(this).addClass(e).removeClass(c).removeClass(d) 151  }) 152  }, 153 is_pc:function(){ 154 for(var a=new Array("Android","iPhone","Windows Phone","iPod","iPad","BlackBerry","MeeGo","SymbianOS"), 155 b=navigator.userAgent,c=a.length,d=0;c>d; 156 d++) 157 if(b.indexOf(a[d])>0)return!1;return!0 158  }, 159 fromPosGeiIdx:function(){ 160 for(var a=mainObj.$par.children(),b=$(document).scrollTop(),c=a.length-1;c>=0;c--){ 161 var d=a.eq(c)[0].offsetTop;if(b>=d)return c 162  } 163  }, 164 scrollSetPos:function(){ 165 var a=mainObj.fromPosGeiIdx(); 166 mainObj.$menu.children().eq(a).addClass("sel").siblings().removeClass("sel"), 167 mainObj.suffix=a 168  }, 169 judgeBro:function(){ return $.browser.opera||$.browser.msie&&("6.0"==$.browser.version||"7.0"==$.browser.version||"8.0"==$.browser.version||"9.0"==$.browser.version)}};

View Code

 

核心测试代码

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>Document</title>  6 <script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>  7  8 <style>  9  #testGroup{  10  position: relative; 11 } 12  .test{  13  position: absolute; 14  transform:rotate(177deg); 15 } 16 17 </style> 18 </head> 19 <body> 20 <div id="testGroup"> 21 <div class="imgGroug"> 22 <ul> 23 <img alt="" class="img0 png" src="./img/page1_0.png"> 24 <img alt="" class="img1 png" src="./img/page1_1.png" style="margin-left: -88.0105px; margin-top: -85.666px;"> 25 <img alt="" class="img2 png" src="./img/page1_2.png" style="margin-left: -88.0105px; margin-top: -85.666px;"> 26 </ul> 27 </div> 28 <div class="test"> 29 <img alt="" class="img0 png" src="./img/page1_0.png"> 30 </div> 31 </div> 32 33 </body> 34 <script> 35 //alert($); 36 var i=1; 37 var deg=15; 38 var left=0; 39 var leftIns=10; 40 setInterval(function(){ 41  $('.test').css({ 'transform':'rotateY('+deg+'deg)'}); 42  $('.test').css({ 'left':left+'px'}); 43  deg+=15; 44 if(left>300){ 45  leftIns=-leftIns; 46  }; 47 if(left<0){ 48  leftIns=-leftIns; 49  }; 50  left+=leftIns; 51 52  console.log(leftIns); 53 },100) 54 55 </script> 56 </html>

 

 

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9372768.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107399.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号