帝王谷资源网 Design By www.wdxyy.com
做了一个用鼠标拖拽配合 CSS3 的小尝试,截图如下:
熟悉拖拽效果的朋友应该不会陌生鼠标按住以后,左右拖动的实现方式。
这个小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""; 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)"; } }
这效果只是一个尝试,如有需要的朋友,可直接在下面留言,发送源码。
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]