乐于分享
好东西不私藏

给你的网站添加“富强民主”点击特效

本文最后更新于2019-06-13,某些文章具有时效性,若有错误或已失效,请在下方留言或联系老夜

网站也有一年多了,之前的满腔热血研究到深夜的日子也一去不复返了,一方面是折腾多了也腻歪,另一方面目前已经脱离校园开始漫长的打工之路,打理网站的时间可谓是越来越少,目前非常勉强保持着每日更新频率,更新方面大不如前大家就多多体谅了。最近有很多建站的朋友问我一些网站特效,由于工作原因不能及时的回复,这里趁着难得的周末附上站内一直在使用的鼠标点击特效,代码不多部署也是非常的简单,又是废话一堆这里直接上硬菜吧!

富强明主点击特效:

演示效果:

代码部分:

<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": 9999999999999999999999999999999999999999,  
                "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>

数字点击特效:

演示效果:

代码部分:

<script>  
    jQuery(document).ready(function($) {  
    var _click_count=0;  
    $("body").bind("click",function(e){ //直接给body一个事件好了.  
    var n=Math.round(Math.random()*100);//随机数  
   // var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素  
     var $i=$("<b>").text("+"+(++n));//添加到页面的元素  
    var x=e.pageX,y=e.pageY;//鼠标点击的位置  
    $i.css({  
    "z-index":99999,  
    "top":y-15,  
    "left":x,  
    "position":"absolute",  
    "color":"red"  
    });  
    $("body").append($i);  
    $i.animate(  
    {"top":y-180,"opacity":0},  
    1500,  
    function(){$i.remove();}  
    );  
    e.stopPropagation();  
    });  
    });  
    </script>

代码部署教程

部署到自己的网站非常的简单,几乎是支持所有的站点,一般情况下只要将复制好的代码粘贴到</body>之前就行了。如果是WordPress网站直接添加到footer.php文件的</body>之前就OK了。代码中的字体以及属性均可以自定义设置,因为上面附上另种不同效果的代码,大家选一个喜欢的给自己的网站装饰下看看效果吧!如果添加后未生效请尝试清理CDN缓存或者浏览器缓存就可以了。

 

本站文章均为手工撰写未经允许谢绝转载:夜雨聆风 » 给你的网站添加“富强民主”点击特效

评论 3

8 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    我连WordPress都不知道是什么,我是不是不止了

    小白3年前 (2021-01-27)Windows 10 | Chrome 78.0.3904.108回复
  2. #0

    老夜,你太帅了,我想跟你学技术,看得出你这个网页用了bootstrap

    小白4年前 (2020-03-23)Windows 10 | Chrome 79.0.3945.88回复
    • 老夜

      这个前端开发框架用处挺大的,写自适应一般都会加个

      老夜4年前 (2020-03-23)Windows 7 | Firefox浏览器 74.0回复
×
订阅图标按钮