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 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue 解决provide和inject响应的问题
Nov 12 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中读写文件实现代码
2011/10/20 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Zabbix实现微信报警功能
2016/10/09 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python实现时间序列可视化的方法
2019/08/06 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python能做什么
2020/06/02 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
跟单文员的岗位职责
2013/11/14 职场文书
业务员岗位职责
2013/11/16 职场文书
团支部建设方案
2014/05/02 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
岗位聘任协议书
2015/09/21 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL