您好,游客注册登录繁體
首页 >> css3 >> jquery+css3实现3d滚动旋转

jquery+css3实现3d滚动旋转

Tyna 2015-07-26 0
浏览次数1077

 

 
最近有个漂亮妹子一直在向我推销潭州的视频,BUT我以前就看了一次觉得挺水的,就对那个妹子表示吾孤高。你们那玩意没意义的很弱。然后那个漂亮妹子锲而不舍的对我发链接,这个效果会吗,这个幻灯会写吗。。。我也是醉了。。。直到有一天
 
那个漂亮妹子也不知道被我的孤高,独孤求败人生寂寞如雪的气质给怒了,拿出了她的必杀技
 
http://xiaobai.52nhw.com/image/pic.gif
 

 
好吧乍一看挺唬人的。。。好吧,我确实被她给唬住了!然后先是加群又是关注的。。。最后搞到一个包。。。

 

然后你认为07-03就是你想看到的代码了吗。。。太天真了

 

里面就一个jquery的库和一堆阿猫阿狗的照片

 

然后老老实实的看视频把,,实际上我是一直在快进。。。。反正最后我快进完了大概的亮点么也就2个。。。还是不罗嗦了上代码
 

复制代码
<div class="job">
  <div class="jobPicBox">
    <div class="JobPicImages"> 

      <img src="image/job/archer.jpg" /> 

      <img src="image/job/assassin.jpg" /> 

      <img src="image/job/avenger.png" /> 

      <img src="image/job/berserker.jpg" /> 

      <img src="image/job/caster.jpg" /> 

      <img src="image/job/lancer.jpg" /> 

      <img src="image/job/rider.jpg" /> 

      <img src="image/job/saber.jpg" /> 

    </div>
  </div>
</div>
复制代码


 
HTML么就是建个盒子搞个几张图片
 

复制代码
.JobPicImages{
transform-style:preserve-3d; 
transform:perspective(1000px) rotateX(-10deg) rotateY(0deg); 
position:relative; 
width:100px;
height:172px; 
margin:200px auto 0;}
.JobPicImages img{ 
height:100%; 
width:100%;
position:absolute; border-radius:5px; box-shadow:1px 1px 5px #333; 
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,1));
outline:none;
}
复制代码


 
css么又几个亮点了
 

-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,1));

 
duang duang duang css3的投影+径向渐变版透明
 
然后么jquery。。。他都没用js
 

复制代码
$(function(){
    var JobPic = $(".JobPicImages img").size();
    var deg = 360/JobPic;
    var roy = 0;
    var rox = -10;
    var xn = 0;
    var yn = 0;
    var play=null
    $(".JobPicImages img").each(function(i) {
        $(this).css({'transform':'rotateY(' + deg*i + 'deg) translatez(350px)'});
        $(this).attr('ondragstart','return false')
    });
    $(document).mousedown(function(ev){
        var x_=ev.clientX;
        var y_=ev.clientY;
        clearInterval(play);
        $(this).bind('mousemove',function(ev){
            var x=ev.clientX;
            var y=ev.clientY;
            xn = x - x_;
            yn = y - y_;
            roy += xn*0.2;
            rox += yn*0.1;
            $(".JobPicImages").css({
transform:'perspective(1000px) rotateX(' +rox+'deg)     rotateY(' +roy+'deg)'
            },300)
            x_=ev.clientX;
            y_=ev.clientY;
        });
    }).mouseup(function(){
       $(this).unbind('mousemove');
        var play = setInterval(function(){
            xn *=0.95;
            yn *=0.95;
            if(Math.abs(xn)<1&&Math.abs(yn)<1){
                clearInterval(play);    
            }
            roy+=xn*0.2;
            rox-=yn*0.1;
            $(".JobPicImages").css({
transform:'perspective(1000px) rotateX(' +rox+'deg)     rotateY(' +roy+'deg)'
            },300)
        })
    })
})
复制代码


 
 
。。。最后么js么无非就是记录鼠标按下之后拖动的位置和鼠标抬起记录鼠标的位置,然后做个比较,然后转啊转,好吧实际上也没什么特别亮眼的地方但是效果还是挺有趣的

 

DEMO:http://xiaobai.52nhw.com/job.html

 

 

 

 

 

博客里面的好多文章都是别人分享给我的,然后我阅读之后觉得不错所以发到我博客做个收藏!如果是转载的文章基本都有原文地址!
当然偶尔也会写点属于自己的心得,当然大多还是吐槽居多。。。
最后属于我的告诫! 既然选择了代码的道路我觉得乐观的心态还是非常重要!整天纠结在无数的逻辑中,会把自己弄奔溃的!!好吧!我曾经一直在奔溃边缘!所以对此深有体会!身体是自己的。没必要为了钱太拼命!细水长流才是王道! author:JounreyYao(小白)

 
学习来源:http://www.cnblogs.com/LoveOrHate/p/4675011.html

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<