网站添加点击出现文字动画效果 - 陌路人博客

网站添加点击出现文字动画效果-陌路人博客-第1张图片陌路人

陌路人博客(molure.cn)
用心传递快乐,初心不变。

网站添加点击出现文字动画效果

网站添加点击出现文字动画效果-陌路人博客- 第3张图片

相信很多人都知道这个效果吧,效果看起来很独特,不同于其他的点击特效。这个效果在一些网站很常见,并且好多网站都有这个代码


代码放置位置

打开模板的footer.php文件 (emlog和WordPress通用)

把下面的代码放到你网站的<body></body>里面就行了

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
   $("body").click(function(e) {
       var a = new Array("陌路人","陌路人","陌路人博客");
       var $i = $("<span/>").text(a[a_idx]);
       a_idx = (a_idx + 1) % a.length;
       var x = e.pageX,
       y = e.pageY;
       $i.css({
           "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
           "top": y - 20,
           "left": x,
           "position": "absolute",
           "font-weight": "bold",
           "color": "#ff6651"
       });
       $("body").append($i);
       $i.animate({
           "top": y - 180,
           "opacity": 0
       },
       1500,
       function() {
           $i.remove();
       });
   });
});
    </script>



×

感谢您的支持,我们会一直保持!

网站添加点击出现文字动画效果-陌路人博客- 第5张图片
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:陌路人博客 » 网站添加点击出现文字动画效果
标签: 教程

发表评论

表情
看不清楚?点图切换

网友评论(0)