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


Posted in Javascript onJanuary 03, 2017

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

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

本示例中使用到了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{
 width: 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;
 width: 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{
 width: 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="width: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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
详解JavaScript常量定义
Jan 03 #Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 #Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 #Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
You might like
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
谈谈python中GUI的选择
2018/03/01 Python
儿童编程python入门
2018/05/08 Python
python实现剪切功能
2019/01/23 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python删除某个目录文件夹的方法
2020/05/26 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
信用社员工先进事迹材料
2014/02/04 职场文书
市场开发计划书
2014/05/07 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
中秋客户感谢信
2015/01/22 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server