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之尺寸调整组件的深入解析
Jun 19 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python实现进程间通信简单实例
2014/07/23 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
销售代表求职自荐信
2013/10/01 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
给校长的建议书范文
2015/09/14 职场文书