3D视觉差---原生js+css
2024-09-23 07:46:38
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* { padding: 0; margin: 0; }body { background: #42509a; } ul { width: 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: relative; margin: 50px auto 0; }
li { position: absolute; list-style: none; }
#pic1 { top: 210px; left: 550px; }
#pic2 { top: 290px; left: 430px; }
#pic3 { top: 215px; left: 220px; }
#pic4 { top: 150px; left: 100px; }
#pic6 { top: 290px; left: 80px; }
#pic7 { top: 120px; left: 480px; }
#pic8 { top: 60px; left: 380px; }
#pic5 { top: -40px; left: -50px; width: 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }
p{text-align:center; padding:10px 0; color:#FFF;}
p a{color:#FFF; text-decoration:none;}
p a:hover{text-decoration:underline;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul_container');
var aLi=oUl.getElementsByTagName('li');
var x=;
var y=;
document.onmousedown=function(ev){
var oEvent=ev || event;
var disX=oEvent.clientX-x;
var disY=oEvent.clientY-y;
document.onmousemove=function(ev){
var oEvent=ev||event;
x= oEvent.clientX-disX;
y=oEvent.clientY-disY;
for(var i=;i<aLi.length;i++){
aLi[i].style.marginLeft=x*aLi[i].style.zIndex/+'px';
aLi[i].style.marginTop=y*aLi[i].style.zIndex/+'px';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
document.reseaseCapture&&document.reseaseCapture();
};
document.setCapture&&document.setCapture();
return false;
};
};
</script>
</head> <body> <ul id="ul_container">
<li id="pic1" style="z-index: 3;"><img src="data:images/1.jpg" alt="" /></li>
<li id="pic2" style="z-index: 4;"><img src="data:images/2.jpg" alt="" /></li>
<li id="pic3" style="z-index: 5;"><img src="data:images/3.jpg" alt="" /></li>
<li id="pic4" style="z-index: 4;"><img src="data:images/4.jpg" alt="" /></li>
<li id="pic6" style="z-index: 3;"><img src="data:images/5.jpg" alt="" /></li>
<li id="pic7" style="z-index: 2;"><img src="data:images/6.jpg" alt="" /></li>
<li id="pic8" style="z-index: 5;"><img src="data:images/7.jpg" alt="" /></li>
<li id="pic5" style="z-index: 1;"></li>
</ul> </body>
</html>
最新文章
- ASP.NET MVC EF 中使用异步控制器
- Call me evilxr
- AC日记——逆波兰表达式 openjudge 3.3 1696
- 使用JMeter创建FTP测试计划
- 第五章 管理程序流(In .net4.5) 之 异常处理
- cogs 1008 贪婪大陆
- SOM网络聚类完整示例(利用python和java)
- 使用hexdump工具追踪EXT4文件系统中的一个文件
- python正则表达式re模块详细介绍
- java异常丢失及异常链
- Android开发之手把手教你写ButterKnife框架(三)
- 超大文本文件浏览器Snaptext,支持不限制大小的文本文件浏览
- 【转载】opencv实现人脸检测
- 割点判断+luogu 3469 POI2008 BLO
- 以添加评论组件为例看angular2请求数据的处理
- Oracle调整内存超出限制出现ORA-27100: shared memory realm already exists问题解决办法
- 浏览器缓存之Expires Etag Last-Modified max-age详解
- opencv 3.2图像矩(Image Moments)
- Javascript实现一个插件
- Android Volley 库通过网络获取 JSON 数据
热门文章
- hdu4632 Palindrome subsequence ——区间动态规划
- leetcode 123. Best Time to Buy and Sell Stock III ----- java
- POJ3308 Paratroopers(网络流)(最小割)
- HDU-4777 Rabbit Kingdom(区间更新求和)
- java的nio之:浅析I/O模型
- MFC中使用Duilib--2
- FileReader/FileWriter复制文件
- 取得某个数组前key大 PHP实现
- JavaScript遍历table的行和列
- iOS开发笔记-swift实现iOS数据持久化之归档NSKeyedArchiver