css3+js打造炫酷图片展示 

<!DOCTYPE html>
<html onselectstart="return false">
<!-- onselectstart="return false" 禁止页面复制-->
<head lang="en">
    /*onselectstart="return false"*/
    <meta charset="UTF-8">
    <title>document</title>
    <!--一共用的就是40到50个单词记住即可-->
    <!-- div.pic 是创建一个盒子-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        div.pic{
            width: 120px;
            height: 180px; /* 133:200  约等于 4:6  */
            /*border: 1px dotted #f00;*/
            margin: 200px auto 0;/*上---左右---下 */
            position: relative;
            transform-style: preserve-3d;
            transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
        }
        div.pic img{
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 5px; /*加上圆角*/
            box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/
            -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /*box-reflect倒影属性练习*/
            /*-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1) , 这是一个渐变*/
        }
        div.pic p{
            width: 1200px;
            height: 1200px;
            background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,0.3),rgba(0,0,0,0));
            left: 50%;top: 100%;
            margin-top: -50px;
            margin-left: -600px;
            transform: rotateX(90deg);
            border-radius: 600px;
        }
    </style>
</head>
<body>
    <!--div 长方型的区域-->
    <div class="pic">
        <img src="img/1.jpg" alt="1.jpg"/>
        <img src="img/2.jpg" alt="2.jpg"/>
        <img src="img/3.jpg" alt="3.jpg"/>
        <img src="img/4.jpg" alt="4.jpg"/>
        <img src="img/5.jpg" alt="5.jpg"/>
        <img src="img/6.jpg" alt="6.jpg"/>
        <img src="img/7.jpg" alt="7.jpg"/>
        <img src="img/8.jpg" alt="8.jpg"/>
        <img src="img/9.jpg" alt="9.jpg"/>
        <img src="img/10.jpg" alt="10.jpg"/>
        <img src="img/11.jpg" alt="11.jpg"/>
        <p></p>
    </div>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //设定初始变化值
            var translate=800;
            //文档添加鼠标滚轮事件，demo没写兼容，不支持火狐
            document.addEventListener("mousewheel",function(e){  //缩放
                var distance=50 //每次滚轮缩放变化值
                if(e.wheelDelta>0){      //方向
                   clearInterval(play)
                   translate+=distance    //perspective值变化              
                   $("div.pic").css({
                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'
                   });  //css3变化
                     
                }else if(e.wheelDelta<0){
                    clearInterval(play)
                   translate-=distance                
                   $("div.pic").css({
                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'
                   });
                }
            })
            var imgL = $("div.pic img").size();  //img数量
//            alert(imgL);
            var deg = 360 / imgL;   //角度
            var toY = 0, toX = -10;
            var xN = 0,yN = 0;
            var play = null;

            $("div.pic img").each(function(i){
                $(this).css({
                    'transform':'rotateY('+i*deg+'deg) translateZ(350px)'  //css设置，分别设定变化角度，同样的z轴变化，形成一个圆
                });
                $(this).attr("ondragstart","return false");
                /*浏览器禁止拖拽功能*/
            });
            $(document).mousedown(function(ev){
                /*console.log("shu biao an xia le !");*/
                var x_ = ev.clientX;
                var y_ = ev.clientY;
                clearInterval(play);
                $(this).bind("mousemove",(function(ev){
                  /* console.log('yi dong !');*/
                    var x = ev.clientX;
                    var y = ev.clientY;
                    xN = x - x_;
                    yN = y - y_;
                    toY += xN*0.2;
                    toX -= yN*0.1;

                    //$("body").append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:"+y+"px;left:"+x+"px;"></div>')/*打点计数器*/
                    $("div.pic").css({
                       transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'
                    });
                    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 )/*Math绝对值*/clearInterval(play);
                        toY += xN*0.2;
                        toX -= yN*0.1;
                        $("div.pic").css({
                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'
                        });
                    },30);
                    //return play
            });
        });
    </script>
</body>
</html>

借用的网络分享的一个demo，在上面添加了鼠标滚轮放大缩小（没有写兼容，火狐不支持）效果。
有几个知识点记录下：

1.鼠标滚轮事件

在jquery中没有滚轮事件，所以需要我们自己去码

其中ie，chorme，safri中事件为mouseWheel，火狐为DOMMouseScroll，判断滚动方向也不一样，前4者为wheelDelta，后者为detail.detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120。

2.perspective

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

3.rotateY

rotateX()、rotateY()和rotateZ()分别为沿X，Y，Z方向旋转。

posted @ 2015-07-21 16:48  走在起点  阅读(3358)  评论(1)  编辑  收藏  举报