首页 新闻 搜索 专区 学院

请大神看一下这个点击效果是怎么实现的 ;多谢

0
悬赏园豆:5 [已解决问题] 解决于 2017-11-14 14:35

就像图片显示的,点击的时候在鼠标位置出现一个圆的元素,由小变大,然后消失;求指导;

_只影向谁去的主页 _只影向谁去 | 初学一级 | 园豆:51
提问于:2017-11-06 16:30
< >
分享
最佳答案
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
写代码的相声演员 | 小虾三级 |园豆:517 | 2017-11-06 17:25

不好意思,可能录屏的效果导致git图片显示成了这样;效果不是那个红色的小圆圈;那个是录屏导致的,是后面的那个大的圆圈;逐渐变大到整个ul的;

_只影向谁去 | 园豆:51 (初学一级) | 2017-11-07 11:19

@_只影向谁去: 那也不是问题啊,改改animate里面的参数就行啊,如果不想要“消失事件”,把嵌套的那个animate删掉就好了

写代码的相声演员 | 园豆:517 (小虾三级) | 2017-11-07 11:26

@_只影向谁去: 你是不是想要水圈波纹效果?

我实在懒得写了,而且我艺术细胞也不好,给你个思路。用我上面给你的代码,改吧就能出来。

我是把一个生成圆的的div挪到了鼠标坐标。在这个之前你需要在ul上套一层范围遮罩层。以此来限制圆能扩大到最大的范围。当动画结束移除整个遮罩以免妨碍click事件。

写代码的相声演员 | 园豆:517 (小虾三级) | 2017-11-07 11:39

@写代码的相声演员: 我试试,谢谢你

_只影向谁去 | 园豆:51 (初学一级) | 2017-11-07 18:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册