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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
第十四节 命名空间 [14]
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
python 判断自定义对象类型
2009/03/21 Python
python访问纯真IP数据库的代码
2011/05/19 Python
老生常谈Python基础之字符编码
2017/06/14 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
感恩老师的演讲稿
2014/05/06 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
看上去很美观后感
2015/06/10 职场文书