首页 > 代码库 > 苹果dock效果
苹果dock效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #div1{ 8 width: 100%; 9 position: fixed;10 text-align: center;11 bottom: 0;12 left: 0;13 }14 #div1 img{15 width: 64px;16 }17 </style>18 <script type="text/javascript">19 window.onload=function()20 {21 var oDiv1 = document.getElementById("div1");22 var aImgs = oDiv1.getElementsByTagName("img");23 var ainput = document.getElementsByTagName("input");24 25 console.log(aImgs[0].getBoundingClientRect());26 27 document.onmousemove = function(ev) {28 //计算鼠标到每个图片之间的直线距离29 var e = ev || event;30 for (var i=0; i<aImgs.length; i++) {31 //计算直线距离32 //因为鼠标是到可视区的距离，所以，我们应该获取鼠标到可视区的距离-元素到可视区的距离33 var a = Math.abs(e.clientY - aImgs[i].getBoundingClientRect().y - aImgs[i].offsetHeight / 2);34 var b = Math.abs(e.clientX - aImgs[i].getBoundingClientRect().x - aImgs[i].offsetWidth / 2);35 var c = Math.sqrt(a*a + b*b);36 37 if (c > 300) {38 c = 300;39 }40 aImgs[i].style.width = 128 - ( c * 0.2 ) + ‘px‘;41 }42 }43 }44 </script>45 </head>46 <body>47 <input type="text" />48 <input type="text" />49 <input type="text" />50 <input type="text" />51 <input type="text" />52 53 <div id="div1">54 <img src="img/1.png" alt="" />55 <img src="img/2.png" alt="" />56 <img src="img/3.png" alt="" />57 <img src="img/4.png" alt="" />58 <img src="img/5.png" alt="" />59 </div>60 </body>61 </html>
问题：
只能在火狐下运行 谷歌下不行？
有待解决？？？
苹果dock效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。