欢迎来到php自学网~
阅读模式:

js图片3D旋转效果

查看:2031  回复:19  类型:  来源:百度搜索  标签 javascript

js图片3D旋转效果:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图片3d旋转</title>

    <style type="text/css">
        #show{position:relative;margin:20px auto;width:800px;border:1px solid #999999;}
        .item{position:absolute;height:40px;width:500px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}
    </style>

    <script type="text/javascript">
        var len;
        var showerObj;
        var listObj;
        var showerWidth=800;
        var showerHeight=400;
        var r;
        var cR=0;
        var ccR=0;
        var timer=0;
        window.onload=function(){
            showerObj=document.getElementById("show");
            listObj=showerObj.getElementsByTagName("div");
            len=listObj.length;
            r=Math.PI/180*360/len;
            for(var i=0;i<len;i++){
                var item=listObj[i];
                item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
                item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
                item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
                item.onclick=function(){
                    cR=Math.PI/2-this.rotate;
                    timer || (timer=setInterval(rotate,10));

                }

            }
            var rX=showerObj.offsetLeft+showerWidth/2;
            var ry=showerObj.offsetTop+showerHeight/2;

            var rotate=function(){
                ccR=(ccR+2*Math.PI)%(2*Math.PI);
                if(cR-ccR<0) cR=cR+2*Math.PI;
                if(cR-ccR<Math.PI){
                    ccR=ccR+(cR-ccR)/19;
                }else{
                    ccR=ccR-(2*Math.PI+ccR-cR)/19;

                }

                if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
                    ccR=cR;
                    clearInterval(timer);
                    timer=0;
                }

                for(var i=0;i<len;i++){
                    var item=listObj[i];
                    var w,h;
                    var sinR=Math.sin(r*i+ccR);
                    var cosR=Math.cos(r*i+ccR);
                    w=60+0.6*60*sinR;
                    h=(40+0.6*40*sinR);
                    item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";

                }
            }
            setInterval(function(){
                cR=(cR-r+2*Math.PI)%(2*Math.PI);
                timer || (timer=setInterval(rotate,10));
            },1500);

            rotate();
        }
    </script>

</head>
<body>

<div id="show">
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>


</body>
</html>

在线预览:3d旋转banner.html

代码来源:百度搜索

分享到:
1 0

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

最新评论:
网站/shl设计  发表于 2017-08-24 10:00:40  中国北京北京
沙发
找了好久终于找到了。 回复
站长 回复 网站/shl设计
2017-08-25 10:19 中国广东深圳 回复
网站/shl设计 回复 网站/shl设计
2017-09-01 14:09 中国北京北京 回复
网站/shl设计 回复 网站/shl设计 评论好像回复有点问题
2017-09-01 14:09 中国北京北京 回复
网站/shl设计 回复 网站/shl设计 回复的人名字不对
2017-09-01 16:09 中国北京北京 回复
站长 回复 网站/shl设计
2017-09-01 22:09 中国广东深圳 回复
网站/shl设计 回复 网站/shl设计 评论好像修改了样式。
2017-09-19 14:09 中国北京北京 回复
OLG-余祥伟 回复 网站/shl设计
2017-09-20 11:09 中国广东深圳 回复
站长 回复 网站/shl设计 无限评论呢,需要回复哪条内容点内容后的回复哈。
2017-09-01 22:09 中国广东深圳 回复
站长 回复 网站/shl设计 我看下、
2017-09-01 22:09 中国广东深圳 回复
站长 回复 网站/shl设计
2017-09-01 22:09 中国广东深圳 回复
网站/shl设计  发表于 2017-08-24 10:02:20  中国北京北京
板凳
都是一些好的文章呀 回复
站长 回复 网站/shl设计
2017-08-25 10:20 中国广东深圳 回复
网站/shl设计  发表于 2017-08-24 10:02:43  中国北京北京
地板
网站的人气怎么样。 回复
站长 回复 网站/shl设计 网站的讨论区上会显示人气呢
2017-08-25 10:22 中国广东深圳 回复
网站/shl设计 回复 网站/shl设计 只要常常更新 我会经常来看的 顺便dj gg
2017-09-01 14:09 中国北京北京 回复
站长 回复 网站/shl设计
2017-09-01 22:09 中国广东深圳 回复
网站/shl设计  发表于 2017-08-24 10:02:58  中国北京北京
4楼
回复
站长 回复 网站/shl设计
2017-08-25 10:24 中国广东深圳 回复
回复:[主题]
表情:
 提交评论
清空

发布评论:


登录:
  表情:
评论话题
推荐阅读:
HTTP 1.1 协议详解   阅读:2028php连接redis   阅读:2087最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:6515最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:6515知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:1840php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:2165PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:2896mysql 为什么添加索引可以提高访问速度   阅读:1995centos 7.2 添加php7 的 php-fpm 开机启动   阅读:9422霍金24岁博士毕业论文在线预览   阅读:1559最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:4436php打印九九乘法表   阅读:2267php+redis实现消息队列   阅读:1174php连接redis   阅读:2087centos7.3安装mongodb3.6   阅读:2356javascript对cookie操作详细代码函数   阅读:1770shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:2606纯干货,程序员面试的超实用技巧   阅读:1388封装php redis缓存操作类   阅读:2160php打印九九乘法表   阅读:2267linux php7安装yaf扩展   阅读:1742linux时间戳有趣的情人节秒1234567890   阅读:1391一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:11529最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:13772mongodb设置shell开机启动脚本   阅读:2265centos 7 安装 nginx-1.11.10   阅读:3454php设置cookie为HttpOnly防止XSS攻击   阅读:2838最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:13772程序员找工作三要素(必看)   阅读:1764php+redis实现消息队列   阅读:1174phpexcel 超简单从数据库一键导出数据到excel教程   阅读:2449一步步带你,如何网站架构   阅读:1480centos 7 修改系统屏幕分辨率   阅读:16351php压缩页面的html代码一行显示   阅读:2270面试的时候回去等通知,等电话的真实意思   阅读:7499最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:4436最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:6515phpexcel 超简单从数据库一键导出数据到excel教程   阅读:2449shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:2606php 使用 smtp.php 类在线发送邮件功能   阅读:2063linux命令中执行php脚本   阅读:1822linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:2672centos 7 安装 mysql-5.7   阅读:2249centos 7 开启网络   阅读:1773shell脚本统计当前服务器并发连接数   阅读:2058web性能测试工具ab的测试方法   阅读:1580javascript对cookie操作详细代码函数   阅读:1770nginx编译安装后对nginx进行平滑升级   阅读:528php 读取和设置redis的键值   阅读:2918知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:1840