zoukankan      html  css  js  c++  java
  • 博客园鼠标点击特效代码

     统一回复一下,有些网友直接复制粘贴后没有实现鼠标点击的效果,可能是没有向博客园申请js的权限,申请下来后就可以自定义自己的博客了。

     

    <script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
            var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script>
     

    2019/11/2更新,已经换了新的鼠标特效了。

    看到有园友在下面留言,询问我当前的鼠标特效是如何实现的,这里统一回复一下。

    更换鼠标标志


    在css样式body里加 cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;里面图片改成自己的就行了

     
    body{
        background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg");
        background-repeat: repeat;
        background-attachment: fixed;
        background-size:cover;
        cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;
    }

    鼠标烟花效果:

    <script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>
    <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
  • 相关阅读:
    Go jaegerde 应用【logger+gorm+grpc+http】
    Go gRPC 调试工具
    iris和xxl-job整合
    Go Grpc部署到 k8s【端口共享】
    rocketmq事务 go 采用rocketmq-client-go的实现
    Go Grpc部署到 k8s【负载均衡】
    ubuntu18安装Kubernetes 1.20.5
    k8s Python API
    go nacos服务发现
    k8s集群日志收集ELK和graylog
  • 原文地址:https://www.cnblogs.com/wkfvawl/p/9414180.html
Copyright © 2011-2022 走看看