• jQuery可拖拽3D万花筒旋转特效


    jQuery可拖拽3D万花筒旋转特效

     

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。

    效果体验:
    http://hovertree.com/texiao/jquery/92/

    进去后可以上下左右的拖动图片。

    本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素。

    默认值: flat
    继承性: no
    版本: CSS3
    JavaScript 语法: object.style.transformStyle="preserve-3d"

    有2个属性值可选择:
    flat 子元素将不保留其 3D 位置。
    preserve-3d 子元素将保留其 3D 位置。

    示例代码如下:

    复制代码
    复制代码
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery可拖拽3D万花筒旋转特效 - 何问起</title><base target="_blank" />
    <style type="text/css">
        *{margin:0;padding: 0;}
        .hovertree{
             120px;
            height: 180px;
            margin: 150px auto 0;
            position: relative;
            /*transform 旋转元素*/
            transform-style:preserve-3d;
            transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
        }
        body{background-color: #66677c;}
    
        .hovertree 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%);
        }
        .hovertree 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);
        }
        .hewenqi{position:absolute;z-index:99;}
        a{color:blue;}
    </style>
    
    </head>
    <body>
    
    <div class="hovertree">
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/01.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/02.jpg" />
        <img src="http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/04.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/05.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/06.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/07.jpg"/>
        <img src="http://hovertree.com/texiao/css/14/hovertreepic/08.jpg"/>
        <img src="http://hovertree.com/hvtimg/201511/6j9j6tk5.png"/>
        <img src="http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg"/>
        <p></p>
    </div>
    
    <script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
    
    var imgL=$(".hovertree img").size();
    var deg=360/imgL;
    var roY=0,roX=-10;
     var xN=0,yN=0;
     var play=null;
    
     $(".hovertree 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);
            console.log('我按下了');
            $(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;
                console.log('移动');
                //$('body').append('<div style="5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');
    
                $('.hovertree').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;
                $('.hovertree').css({
                     transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
                });
              },30);
        });
    });
    </script>
    <div style="text-align:center;margin:250px 0; font:normal 14px/24px 'MicroSoft YaHei';">
        <p class="hewenqi">来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/5x3kdw0k.htm">说明</a></p>
    </div>
    </body>
    </html>
    复制代码
    复制代码

    转自:http://hovertree.com/h/bjag/5x3kdw0k.htm

    相似:http://hovertree.com/h/bjaf/a6598spx.htm

    更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    微服务
    Ubunt16.04下安装PHP7+Nginx+MySQL
    Ubuntu Linux 14.04 LTS 上安装php7+mysql+nginx
    magento2 重置后台密码
    crontab命令
    解决linux buffer/cache 消耗内存过高引发的问题
    Linux配置自动发送邮件
    buff/cache 内容释放
    利用Linode面板Clone克隆搬家迁移不同VPS数据及利用IP Swap迁移IP地址
    css3动画(从上、左下、左、右进入页面)
  • 原文地址:https://www.cnblogs.com/HUANGRONG888/p/6287760.html
Copyright © 2020-2023  润新知