网站左下角“不要点我”效果的实现过程以及相关代码


有朋友询问左下角的“不要点我”的文字抖动效果,以及点击之后的画面抖动效果是怎么实现的,因为时间长了也记不太清楚了,所以今天回顾一下,并把实现的操作步骤分享出来,希望可以帮到更多的朋友。

第一步:下载相关文件,下面两行代码是分别是文字抖动效果、画面抖动效果的js

复制下方的代码中的链接地址,浏览器直接访问进行下载,然后保存到本地,这里的代码是完整的案例参考(请勿直接引用,最好上传到自己的空间,这里为了控制流量,加了防盗链,请理解)。

<link type="text/css" rel="stylesheet" href= "https://tx-1251409380.cos.ap-shanghai.myqcloud.com/wqinf.com/js/jitter.css"/>
<script type="text/javascript" src="https://tx-1251409380.cos.ap-shanghai.myqcloud.com/wqinf.com/js/high.js"></script>

其中,jitter.css是文字抖动的js,high.js是画面抖动的js。

第二步:修改下载文件的high.js文件中,CSS以及音乐等文件的引用地址

在high.js中,因为还引用了另外的音乐文件以及css文件,所以我们需要然后修改其中的引用路径(推荐使用notepad++进行编辑),然后上传修改后的文件,以及引用的CSS和音乐文件到自己的空间,

第三步:引用文字抖动效果的CSS类,以及点击之后触发的onclick事件

<a class="jitter" onclick="hig();" >不要点我</a>

然后打开你的网站,就可以实现本站的左下角的不要点我动态效果了,需要注意的是,js文件的引用,一定要放在触发操作之前。

  • 分享:
评论
  • 博主最后那个引用我不太懂啊 直接把"jitter"这个换成js引用代码?

    • 直接复制链接,然后浏览器直接访问这个链接,默认就是下载,我试了下是可以下载的,还有一个CSS文件和MP3文件,需要在high.js文件中找下下载链接。

    • 从你的形容中,感觉应该是浏览器的原因,有的浏览器是会直接显示js的内容,有的是直接下载。

    • 不是js代码,是一段以errer开头的几行英文 不过现在好使了,多谢分享 :smile:

  • 相关的文件已经打包好,可以在这里下载:https://www.lanzous.com/i2jtbef,如果链接无法访问,可以留言,我会及时更新。

发表评论 说点什么