请大神看一下这个点击效果是怎么实现的 ;多谢
0
最佳答案
0
用几分钟，瞎写了一个，感觉有点像
1 <html> 2 3 <body> 4 <style> 5 li { 6 list-style: none; 7 width: 200px; 8 height: 50px; 9 background: #888; 10 text-align: center; 11 line-height: 50px; 12 } 13 ul{ 14 padding: 0; 15 width: 200px; 16 border-top: 1px solid black; 17 cursor: pointer; 18 } 19 20 li{ 21 border-width: 0 1px 1px 1px; 22 border-color: black; 23 border-style: solid; 24 } 25 .hit{ 26 background: #f00; 27 width: 0; 28 height: 0; 29 position: fixed; 30 top:0px; 31 left: 0px; 32 border-radius:10px 33 } 34 </style> 35 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 36 <ul> 37 <li>项目1</li> 38 <li>项目2</li> 39 <li>项目3</li> 40 <li>项目4</li> 41 <li>项目5</li> 42 <li>项目6</li> 43 <li>项目7</li> 44 </ul> 45 <div class="hit"> 46 </div> 47 <script> 48 var r = 10; 49 var speed = 100; 50 $("ul").on("click", function (e) { 51 e = e || window.event; 52 var x = e.pageX || e.clientX + document.body.scroolLeft; 53 var y = e.pageY || e.clientY + document.boyd.scrollTop; 54 var hit = $(".hit"); 55 hit.stop(); 56 hit.removeAttr("style").css("top", y).css("left", x); 57 hit.animate({ 58 top: y - r, 59 left: x - r, 60 width: 2 * r, 61 height: 2 * r 62 63 }, speed, "linear", function () { 64 hit.animate({ 65 top: y, 66 left: x, 67 width: 0, 68 height: 0 69 }, speed) 70 }) 71 }) 72 </script> 73 </body> 74 75 </html>
收获园豆：5
不好意思,可能录屏的效果导致git图片显示成了这样;效果不是那个红色的小圆圈;那个是录屏导致的,是后面的那个大的圆圈;逐渐变大到整个ul的;
@_只影向谁去: 那也不是问题啊，改改animate里面的参数就行啊，如果不想要“消失事件”，把嵌套的那个animate删掉就好了
@_只影向谁去: 你是不是想要水圈波纹效果？
我实在懒得写了，而且我艺术细胞也不好，给你个思路。用我上面给你的代码，改吧就能出来。
我是把一个生成圆的的div挪到了鼠标坐标。在这个之前你需要在ul上套一层范围遮罩层。以此来限制圆能扩大到最大的范围。当动画结束移除整个遮罩以免妨碍click事件。
@写代码的相声演员: 我试试,谢谢你
