本文实例为大家分享了RecyclerView实现水波纹点击效果的具体代码，供大家参考，具体内容如下 效果图 ?...<item android:drawable="@color/write"/ </ripple drawable/recycler_item_selector.xml (v21版本以下的没有水波纹效果...= null) mOnRvItemClick.onItemClick(view, getAdapterPosition()); } } /** * item点击接口 */...LinearLayoutManager.VERTICAL,false)); mRecyclerView.setAdapter(myAdapter); } } github ：RecyclerView水波纹效果
GestureDetector 使用点击无水波纹出现，InkWell可以实现水波纹效果。...1 widget 设置水波纹点击效果 并设置widget背景 ?...//如果这里不设置就会出现矩形的水波纹效果 borderRadius: new BorderRadius.circular(25.0), //设置点击事件回调 onTap: () {...3 圆角widget 设置自定义水波纹颜色点击效果 ?...toch控件高亮时显示的控件在控件上层,水波纹下层 highlightColor: Colors.purple[800], //点击或者toch控件高亮的shape形状 highlightShape
github地址 安装 npm install vue-ripple-directive --save main.js引入 import Ripple from 'vue-ripple-directive...' Vue.directive('ripple', Ripple); Ripple.color = 'rgba(0, 0, 0, 0.2)'; //自定义水波纹颜色 水波纹按钮
前言 水波纹效果大致上可以分为两类，一类是有界水波纹，而另一类是无界水波纹，较为广泛使用的是有界水波纹。...系统自带的水波纹实现 系统自带的方法非常方便，只需要给相应的空间设置背景，背景内容则为系统自带的 selectableItemBackground ，这样的话，水波纹就会在TextView所在的区域内进行绘制...color/dark_blue" <item android:drawable="@color/blue"/ </ripple 其中item的颜色是控件正常状态的背景色，ripple中的颜色是点击时出现的颜色...对于没有设置点击事件的控件，是没有变化效果的。...foreground设置 现在的点击水波纹效果只有在抬起手指的时候才能看到，不符合一些项目的需求。 其实在控件除了设置background,还可以设置foreground。
，带来的用户体验提升是十分明显的 水波效果 这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。...当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。...定制一个水波纹默认样式 水波纹实际上就是通过用户点击的位置生成一个小圆圈，并且尺寸逐渐扩大到整个被点击元素的一个过程，所以这里先制定一个水波基本的样式，并设置好过度动画，过度动画应该是一个先慢后快的一个过程...如果确定了水波的直径、创建时的(x,y)、过度动画结束时的(x,y)，我们就可以通过transition去渲染水波动画了，创建时的(x,y)就是用户点击的位置，但是水波的直径和过度动画结束时的(x,y....png 我们可以发现通过元素(0,0)点创建的水波进行一定偏移就可以得到我们想要的水波,由此我们可以推断出 动画结束时的水波的尺寸 = 圆的斜边 创建时的(x,y) = 用户点击的位置 过度动画结束时的
本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个div创建一个点击的水波效果。...Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令： 点击 图片 接下来就从源码角度看看它是如何实现的...；手指点击的位置是水波圆初始的中心点，然后计算其左上角坐标x、y为水波元素的初始位置；水波圆的最终中心点其实就是被点击元素的中心点，换算成左上角坐标centerX、centerY即为水波元素的最终位置。...因为水波元素为被点击元素的子元素，所以这些坐标都是相对于被点击元素的左上角坐标计算的： 从绿色的圆过渡成红色的圆，透明度、大小、位置的变化就是水波的扩散效果。...200ms结束，如果我们在60ms内进行第二次点击不会创建第二个水波，因为前一个水波任务还未执行，如果是在60ms后第二次点击，会先调用removeRipplie移除上一个水波，然后重复第一个水波的创建流程
今天我们看一下RippleEffect水波纹点击效果,先上图： image.png 大家可以看到按钮或者布局点击的时候会有水波涟漪的效果，很不错，用到你的app上一定会很高大上的。...paint.setAlpha(rippleAlpha); //设置透明度 this.setWillNotDraw(false); //设置将不绘画 然后创建手势，因为我们的点击有可能为长点击...true); invalidate(); } } 我们可以在这里面设置圆的最大半径，最大半径越大，我们得到的水波涟漪效果越快...，越小，得到的水波涟漪效果越慢，也就是radiusMax /=1，这句代码。...当然我们的ListView的item点击也可以实现这样的效果，因为我们的RippleView中是支持Listview点击的 [java] view plaincopy /** *
在原有的页面跳转 window.location.href='next.html' 返回上一页 window.history.back(-1) top跳转 to...
DOCTYPE html> ClipBoard.js点击复制
——达·芬奇 js禁止右键点击事件触发代码 function click() { return false; } function click1() { if (event.button
html部分代码 点击下载 js部分代码 function download(src) { var...window, 0, 0, 0, 0, 0, false, false, true, false, 0, null); $a.dispatchEvent(evObj); }; 如此，便可以通过点击来实现下载的效果
03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部...即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。...点击a标签即会返回到顶部div所在位置 再来看第二种方式 第二种方式相对来说比较人性化，看起来也比较舒服，直接先来看代码吧 落帆亭博客专注web前端开发 <a class...).animate({scrollTop:0},1000); return false; }); a标签的样式和方式和第一种方式相同，只不过给其添加了一个点击事件...，此事件需要进入jquery.js文件，点击之后滚动条会有一个滚动过程，不是一下子回到顶部，个人感觉不错。
css: .notclick{ pointer-events: none; } js: $("#divID"/".divClass").addClass("notclick");//设为不可点击...$("#divID"/".divClass").removeClass("notclick");//移除不可点击
randomP(){ //随机数函数 return Math.round(Math.random() * (500 - 1)) + 1; } function spawn(){ //生成一个点击运行...left:"+ randomP() +"px;top:"+randomP()+"px'>球"; } spawn();//页面首次加载运行一次 spawn() 函数 但是这样等于是每次点击都重新写入一个元素....style 实现 将思路调整为点击修改小球坐标就可以。（其实这样才是正常思路，我只是想顺便提一嘴之前重复 innerHTML 的玩法很逆天） 可以用 *.style.
然后想到去找js插件，找到了一款各个浏览器都兼容得不错的JS复制插件 Zero Clipboard 。...所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在button之上，这样事实上点击的不是button而是 Flash ，也就能够使用 Flash 的复制功能了。...当中须要两个文件：ZeroClipboard.js 和 ZeroClipboard.swf ，将这两个文件放入到你的项目中。 下载下来后里面有个小样例。例如以下： 输入须要复制的内容 '> 样式是例如以下引入的： <script type
一、理论依据 水波的物理学模型便是理论依据。水波有如下特性： 扩散：水波总是从被扰动的中心向外扩散。在水波扩散过程中每个点都在得到能量后以自己为中心震动，并向四周传播能量。...衰减：水波在传播过程中能量会逐渐的衰减，因为水的震荡是有阻尼的。 折射：由于水波表面各处有不同程度的倾斜，由于折射，将会看到水底景物的不同程度的偏移，看起来是变形的。...反射：由于水波表面的凹凸不平，比起平静时期的水面，水面上各点反光程度将会不同程度的受到影响，从而改变了自己的亮度，颜色。 水波还有衍射等特性。但是考虑问题的核心在于能量传递或者能量扩散。...因为背景图像按照波能偏移显示，得到水波效果。 在考虑了反射的情况下（无论是否考虑了折射），不论是否使用了背景图像，都会有水波效果，因为水面各点的亮度按照波能进行加强和减弱。...当然，两者考虑的情况下水波最为逼真。 这就相当于对一池清水，没有反射光的时候就算有扰动，也看不到波形；而如果有水底背景，只要有折射存在，也能感到有水波存在。形成水波最主要的还是反射因素。
:/Users/xpp/Desktop/Lena.png') rows,cols=img.shape[:2] dst=np.zeros((rows,cols,3),dtype="uint8") #定义水波特效参数...wavelength=20 amplitude=30 phase=math.pi/4 #获取中心点 centreX=0.5 centreY=0.5 radius=min(rows,cols)/2 #设置水波覆盖面积...icentreX=cols*centreX icentreY=rows*centreY #图像水波特效 for i in range(rows): for j in range(cols):...cv2.imshow('original',img) cv2.imshow('result',dst) cv2.waitKey() cv2.destroyAllWindows() 算法：图像水波特效是围绕水波中心点进行波纹涟漪传递...如图，红轴表示水面，蓝色椭圆表示水波。 对于某个点x，其运动轨迹上的每个点都可以分解为与视线平行和垂直的2个方向上的位移，计算出垂直视线的位移y，即计算出水波导致像素点偏移位移。
水波扩散是一个比较好看的交互效果，特别是在某些以水为故事发生场景的游戏中，扩散的水波会让场景更加栩栩如生 ?...demo 实现思路 如果水波静止，我们看到的其实是像素点围绕着某个中心点的拉伸效果，我们只需让每个像素点叠加上它和中心点的向量差，就能够呈现出画面上的所有像素围绕中心点的拉伸感。...周期性往外涌 这种呼吸灯式的涌动其实和我们的最终效果有很大区别，因为它永远在循环涌动，但是我们的水波是从中心扩散出去之后，中间部分就不再动了的，怎么让中间的像素不再多次涌动呢？...如果把一圈水波比作圆，那水波的扩散行为其实就是这个圆的半径在不断的增大，圆外面的波纹有效，圆里面的波纹静止。...未调优效果 接下来的就是参数的调试，主要是三角函数的采样那里，我们希望水波能够产生多个波动，所以我们需要乘上一定的倍数，让函数的作用范围足够大，才能有足够多的波峰谷底。
charset="utf-8"> 获取当前点击对象...title> /*传入参数this即可获取当前点击的对象...console.log(data.id); alert(data.innerText); } 点击事件里传参数
alert('ah, press press press'); }); 具体使用的时候，也有一些问题： 因为这个是实现利用histroy.pushState写入了一个指定状态STATE，你点击一次后...上次那个监听的操作执行完后，你还需要监听这个物理返回键，这时候你就需要再上次那个操作完之后再使用histroy.pushState再写入一次之前写入的那个状态，这样下次会继续监听那个物理返回键，否则下次你再点击那个返回键的话...，就会直接返回浏览器的栈的上一级 不过这个方法有些缺陷： 如果项目本身使用了pushState，则历史记录会有瑕疵（多了一个历史）； 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键...举个例子： 我在vue的项目中引入xback.js 关于上面在...vue中引入外部js，请参考 http://www.cnblogs.com/zhuchenglin/p/7455203.html 然后在vue中定义一个load_xback 方法 load_xback
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
