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 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
js微信分享API
Oct 11 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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 危险函数解释 分析
2009/04/22 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php实现的mongodb操作类
2015/05/28 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python中使用logging模块打印log日志详解
2015/04/05 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
数控技术与应用毕业生自荐信
2013/09/24 职场文书
应用化学专业本科生求职信
2013/09/29 职场文书
和平主题的演讲稿
2014/01/12 职场文书
小学音乐课教学反思
2016/02/18 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技