zoukankan      html  css  js  c++  java
  • 前端 旋转相册

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>
    </head>
    
    <style type="text/css">
    *{margin:0;padding: 0;}
    .pic{
     120px;
    height: 180px;
    border: 1px red solid;
    margin: 150px auto 0;
    position: relative;
    /*transform 旋转元素*/
    transform-style:preserve-3d;
    transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
    
    }
    body{background-color: black;overflow:hidden;}
    
    .pic img{
    
    position: absolute;
     100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #fff;
    /*倒影的设置*/
    -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
    }
    .pic p{
     1200px;
    height: 1200px;
    background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));
    position: absolute;
    top:100%;left:50%;
    margin-top: -600px;
    margin-left: -600px;
    border-radius:600px;
    transform:rotateX(90deg);
    }
    </style>
    
    <body>
    
    <div class="pic">
    <img src="img/1.jpg"/>
    <img src="img/2.jpg" />
    <img src="img/3.jpg"/>
    <img src="img/4.jpg"/>
    <img src="img/5.jpg"/>
    <img src="img/6.jpg"/>
    <img src="img/7.jpg"/>
    <img src="img/8.jpg"/>
    <img src="img/9.jpg"/>
    <img src="img/10.jpg"/>
    <img src="img/11.jpg"/>
    <p></p>
    </div>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    var imgL=$(".pic img").size();
    var deg=360/imgL;
    var roY=0,roX=-10;
    var xN=0,yN=0;
    var play=null;
    
    $(".pic img").each(function(i){
    $(this).css({
    <!---translateZ 定义2d旋转沿着z轴->
    "transform":"rotateY("+i*deg+"deg) translateZ(300px)"});
    <!--防止图片被拖拽-->
    $(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;
    //$('body').append('<div style="5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');
    
    $('.pic').css({
    transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'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){
    clearInterval(play);
    }
    roY+=xN*0.2;
    roX-=yN*0.1;
    $('.pic').css({
    transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
    });
    },30);
    
    });
    
    });
    </script>
    
    </body>
    </html>
  • 相关阅读:
    HDU5418.Victor and World(状压DP)
    POJ2686 Traveling by Stagecoach(状压DP)
    POJ3254Corn Fields(状压DP)
    HDU5407.CRB and Candies(数论)
    CodeForces 352D. Jeff and Furik
    CodeForces 352C. Jeff and Rounding(贪心)
    LightOj 1282 Leading and Trailing
    Ural 1057. Amount of Degrees(数位DP)
    HDU 2089 不要62 (数位DP)
    HDU5366 The mook jong (DP)
  • 原文地址:https://www.cnblogs.com/ch94/p/10026962.html
Copyright © 2011-2022 走看看