前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网站添加鼠标点击特效富强、民主、和谐

给网站添加鼠标点击特效富强、民主、和谐

作者头像
爱游博客
发布2019-08-06 22:35:18
1.4K0
发布2019-08-06 22:35:18
举报
文章被收录于专栏:爱游博客爱游博客

(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('<div style="" id="' + s + '"></div>'); (window.slotbydup = window.slotbydup || []).push({ id: "u4235867", container: s }); })();

function playPause() { var music = document.getElementById('tts'); if (music.paused) { music.play(); var audio = document.getElementById("tts"); audio.onended = function() { audio.src = "https://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex="; audio.play(); audio.addEventListener("ended", function() { audio.src = "https://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex="; audio.load(); audio.addEventListener("ended", function() { audio.pause(); }, false); }, false); }; } else { music.pause(); } } $(document).ready(function(){ $(".tts-play").click(function() { $(".tts-play").toggleClass("tts-read"); }); });

给网站添加“富强、民主、和谐”鼠标点击特效。这个特效网上也有许多教程,爱游博客看到后也收集来了并给博客也加上了这个特效。其实就是一个JS代码,代码如下。把JS放在网站中就可以使用了。

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

放在网站底部,也可以用页脚小工具,效果图如下。

cambrian.render('tail')

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年2月24日2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档