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

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

第一步:下载相关文件,下面两行代码是分别是文字抖动效果、画面抖动效果的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文件的引用,一定要放在触发操作之前。

 

 

点赞 0

WQINF.COM

我还没有学会写个人说明!

8 条评论

  1. 墨蓝

    0 博主最后那个引用我不太懂啊
    直接把”jitter”这个换成js引用代码?

  2. 0 请问上面这两个文件是如何下载的?复制代码中的链接无法下载呀

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

      • @WQINF.COM 0 好了,现在可以了,刚刚显示一堆代码

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

          • @WQINF.COM 0 不是js代码,是一段以errer开头的几行英文
            不过现在好使了,多谢分享 🙂

  3. 0 多谢分享,等会有时间我也去套用一下

  4. WQINF.COM

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

回复 WQINF.COM 取消回复

您的电子邮件地址不会被公开,必填项已用*标注。

Captcha Code

相关推荐