网页设计实战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)


相关推荐

发表回复

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

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