鼠标点击网站特效生成原理(附代码)

admin HTML/CSS/JS评论8431字数 1044阅读模式
摘要

有朋友经常问,网站上点击出现爱国字眼是怎么做出来的,鼠标点击就显示“富强、民主、和谐”等24个词语,这样鼠标点击特效。下面来分享一下如何实现的。

1,效果如下:

添加页面点击特效,点击页面会显示:“富强”, “民主”, “文明”, “和谐”, “自由“, “平等”, “公正” ,“法治”, “爱国”, “敬业”, “诚信”, “友善”; 可以来SEO研究中心论坛看效果。

2,实现方法

通过一段JS在网页中加载调用就行了,代码如下:

  1. <script type="text/javascript">  
  2. var a_idx = 0;  
  3. jQuery(document).ready(function($) {  
  4. $("body").click(function(e) {  
  5. var a = new Array("富强""民主""文明""和谐""自由""平等""公正" ,"法治""爱国""敬业""诚信""友善");  
  6. var $i = $("<span/>").text(a[a_idx]);  
  7. a_idx = (a_idx + 1) % a.length;  
  8. var x = e.pageX,  
  9. y = e.pageY;  
  10. $i.css({  
  11. "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,  
  12. "top": y - 20,  
  13. "left": x,  
  14. "position""absolute",  
  15. "font-weight""bold",  
  16. "color""#ff6651"  
  17. });  
  18. $("body").append($i);  
  19. $i.animate({  
  20. "top": y - 180,  
  21. "opacity": 0  
  22. },  
  23. 1500,  
  24. function() {  
  25. $i.remove();  
  26. });  
  27. });  
  28. });  
  29. </script>  

3,如何使用

复制上方代码到你的需要的页面,例如footer.php页面的html标记结束前。此代码引用到了jquery,如果你的页面没有引入jquery库的话,需要在代码前引入

  1. <script language="javascript" type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>  

jquery库引用的是七牛云的cdn库,你可以自己本地化,也可以引入别的cdn库,可以自定义更换色值,可以自定义更换文字。

版权声明:文章图片资源来源于网络,如有侵权,请留言删除!!!
广告也精彩
admin
  • 本文由 发表于 2021年9月25日 18:54:34
  • 转载请务必保留本文链接:https://www.58pxe.com/7682.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: