javascript实现3D切换焦点图


Posted in Javascript onOctober 16, 2015

做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下:

javascript实现3D切换焦点图

熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式。
这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中,
当拖动图片时,显示出立体的感觉~~

直接代码如下:

#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}
#list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; }
#list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;}
#list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;}
#list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);}
#list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg);
}
#list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px);
}
#list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg);
}
#list em{ width:400px;height:400px; position:absolute;left:0;background:#666;}
#list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;}
#list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;}
#list li:nth-last-child(1){ z-index:10;}
#list li:nth-last-child(2){ z-index:20;}
#list li:nth-last-child(3){ z-index:30;}
#list li:nth-last-child(4){ z-index:40;}
#list li:nth-last-child(5){ z-index:50;}
#list li:nth-last-child(6){ z-index:60;}
#list li:nth-child(2) span{ background-position:0 -40px;}
#list li:nth-child(3) span{ background-position:0 -80px;}
#list li:nth-child(4) span{ background-position:0 -120px;}
#list li:nth-child(5) span{ background-position:0 -160px;}
#list li:nth-child(6) span{ background-position:0 -200px;}
#list li:nth-child(7) span{ background-position:0 -240px;}
#list li:nth-child(8) span{ background-position:0 -280px;}
#list li:nth-child(9) span{ background-position:0 -320px;}
#list li:nth-child(10) span{ background-position:0 -360px;}
#list li:nth-child(11) span{ background-position:0 -400px;}
#btns{ width:130px; margin:0 auto;}
#btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;}
#btns .active{ background:#f60;color:#fff;}

HTML

<ul id="list">
 <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
  <li>
   <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <em></em>
      <em></em>
    </div>
  </li>
</ul>
<ol id="btns">
 <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

JAVASCRIPT

var oList=document.getElementById("list");
var oBtns=document.getElementById("btns");
tabPic(oList,oBtns);
function tabPic(obj,btns)
{
 var aLi=obj.getElementsByTagName("li");
 var aBtn=btns.getElementsByTagName("li");
 var oUl=document.getElementsByTagName('ul')[0];
 var iDis=aLi[0].offsetWidth;
 var iDeg=90;
 aBtn.iNow=0;
 for(var i=0;i<aBtn.length;i++)
 {
 oUl.title=aBtn[i].title='妙味课堂-www.miaov.com';
 aBtn[i].index=i;
 aBtn[i].onclick=function()
 {
  for(var i=0;i<aLi.length;i++)
  {
  starMove(aLi[i],-this.index*iDeg,aBtn);
  }
 };
 }
 for(var i=0;i<aLi.length;i++)
 { 
 aLi[i].index=i;
 aLi[i].iDeg=0;
 aLi[i].off=false;
 aLi[i].onmousedown=function(ev)
 {
  if(this.off)
  {
  return;
  }
  var ev=event||ev;
  var iNowX=ev.clientX;
  var iNowDeg=0;
  var oThis=this;
  var iLength=0;
  var iMin=0;
  var iMax=0;
  document.onmousemove=function(ev)
  {
  if(Math.abs(iNowDeg)>=80)
  {
   return;
  }
  var ev=event||ev;
  iNowDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);
  iLength=Math.abs(parseInt(iNowDeg/9));
  iMin=oThis.index-iLength>0?oThis.index-iLength:0;
  iMax=oThis.index+iLength<aLi.length?oThis.index+iLength:aLi.length-1; 
  for(var i=iMin;i<=iMax;i++)
  {
   aLi[i].iDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);
   setDeg(aLi[i]);
  }
  iNowX=ev.clientX;  
  }
  document.onmouseup=function()
  {
  var iEnd=0;
  document.onmouseup=document.onmousemove=null;
  if( Math.abs(iNowDeg)>iDeg/4)
  {
   iEnd=iNowDeg>0?90-iNowDeg:-(90-Math.abs(iNowDeg));
  }
  else
  {
   iEnd=-iNowDeg;
  }  
  iEnd=Math.round(iEnd+oThis.iDeg);
  for(var i=0;i<aLi.length;i++)
  {
   starMove(aLi[i],iEnd,aBtn);
  }
  }
  return false;
 };
 }
}
function starMove(obj,iTarget,aBtn)
{
 if(obj.timer)
 {
 clearInterval(obj.timer);
 }
 obj.off=true;
 var iSpeed=0;
 var iNow= iTarget>=0? Math.abs((aBtn.length-iTarget/90)%aBtn.length): Math.abs((iTarget/90) % aBtn.length);
 if(iNow!=aBtn.iNow)
 {
 aBtn[aBtn.iNow].className="";
 aBtn.iNow=iNow;
 aBtn[aBtn.iNow].className="active";
 }
 obj.timer=setInterval(
 function()
 {
  iSpeed+=(iTarget-obj.iDeg)/12;
  iSpeed*=0.86;
  if(Math.abs(obj.iDeg-iTarget)<0.5 && Math.abs(iSpeed)<0.5)
  {
  clearInterval(obj.timer);
  obj.iDeg=iTarget;
  obj.off=false;
  }
  else
  { 
  obj.iDeg+=iSpeed;
  }
  setDeg(obj);
 },24
 );
}
function setDeg(obj)
{
 var oDiv=obj.children[0];
 with(oDiv.style)
 {
 WebkitTransform="translateZ(-200px) rotateY("+obj.iDeg+"deg)";
 }
}

这效果只是一个尝试,如有需要的朋友,可直接在下面留言,发送源码。

Javascript 相关文章推荐
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 #Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 #Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 #Javascript
javascript实现动态标签云
Oct 16 #Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 #Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP查询快递信息的方法
2015/03/07 PHP
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
详解python程序中的多任务
2020/09/16 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
人事部主管岗位职责
2013/12/26 职场文书
经典促销广告词大全
2014/03/19 职场文书
服装设计师求职信
2014/06/04 职场文书
小学运动会报道稿
2014/10/04 职场文书
农业项目合作意向书
2015/05/08 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
win sever 2022如何占用操作主机角色
2022/06/25 Servers
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript