鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片

Posted 2021-03-01 chenyingying0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片相关的知识，希望对你有一定的参考价值。

js动画--鼠标点击出现爱心

只需将如下JS代码放到</body>之前就好了

<script type=‘text/javascript‘ src=‘//api.dujin.org/js/aixintexiao.js‘></script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script type=‘text/javascript‘ src=‘http://api.dujin.org/js/aixintexiao.js‘></script>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] 
        JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]</p>
</body>
</html>

效果图

技术图片

也可以直接放源码

<script type="text/javascript">
/* 缙哥哥博客鼠标点击显示不同颜色爱心特效JS代码 https://www.dujin.org/12146.html */
!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);
</script>

鼠标点击出现社会主义价值观（jQuery）

    <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>

别忘了引入jQuery

效果图

技术图片

配上::selection改变文字选中颜色，效果还是蛮不错的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <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>
    <style>
        p::selection{
            background:lightblue;
            color:#fff;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] 
        JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]</p>
</body>
</html>

技术图片

原生js实现的，鼠标点击出现随机颜色的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        window.onload = function() {
        //定义点击出现文字类
        function ClickFrontShow() {
            //定义所需文字和颜色
            this.fron = [‘高兴‘, ‘开心‘, ‘?‘, ‘欢乐‘, ‘愉悦‘, ‘愉快‘, ‘快乐‘, ‘欢喜‘, ‘喜悦‘, ‘欢欣‘, ‘欢畅‘, ‘欢腾‘, ‘雀跃‘, ‘欢快‘];
            this.colo = [‘#FF69B4‘, ‘#ff6651‘, ‘orange‘, ‘#FF00FF‘, ‘#00FF7F‘, ‘#00BFFF‘, ‘#BA55D3‘];
            //获取body元素
            this.elBody = document.getElementsByTagName("body")[0];
            //初始化randomNum
            this.randomNum = null;
            //初始化字体inde
            this.finde = 0;
            //初始化className
            this.cls = 0;
        }
        
        //定义初始化
        ClickFrontShow.prototype.init = function(frontArray, colorArray) {
            //自定义颜色和字体
            this.fron = frontArray || this.fron;
            this.colo = colorArray || this.colo;
            
            this.listenMouse();
        }
        
        //创建文字 
        ClickFrontShow.prototype.createFront = function (classname) {
            var self = this;
            let ospan = document.createElement(‘span‘);
            //设置样式
            let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
            //随机字体和颜色
            let randomFront = self.fron[self.finde];
            let randomColor = self.colo[Math.round(Math.random()*(self.colo.length-1))];
            //字体下标增1
            self.finde = (self.finde+1) % self.fron.length;
            //向body中添加元素
            self.elBody.appendChild(ospan);
            //绑定一个classname
            ospan.className = String(classname);
            //添加样式
            ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
            ospan.style.color = randomColor;
            ospan.innerHTML = randomFront;
        }
        
        
        //监听鼠标点击
        ClickFrontShow.prototype.listenMouse = function() {
            var self = this;

            //鼠标点击事件
            document.onclick = function(e) {
                //避免classname值重复导致出现bug
                if(self.cls === 20){
                    self.cls = 0;
                }else{
                    self.cls += 1;
                }
                //创建文字
                self.createFront(self.cls);
                let el = document.getElementsByClassName(self.cls)[0];
                
                //鼠标点击位置
                el.style.left = e.clientX + ‘px‘;
                el.style.top = e.clientY + ‘px‘;
                
                //过时改变
                setTimeout(function() {
                    el.style.opacity = 0;
                    el.style.top = el.offsetTop - 100 + ‘px‘;
                }, 100);
                //过时清除
                setTimeout(function() {
                    self.elBody.removeChild(el);
                }, 2000);
            }
            
        }
        
        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }
        
    </script>
    <style>
        p::selection{
            background:pink;
            color:#fff;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] 
        JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]</p>
</body>
</html>

效果图

技术图片

鼠标cursor自定义图片

首先自己做个png小图，或者网上找一个

设置cursor: url(cursor.png),auto;

效果图

技术图片

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        window.onload = function() {
        //定义点击出现文字类
        function ClickFrontShow() {
            //定义所需文字和颜色
            this.fron = [‘高兴‘, ‘开心‘, ‘?‘, ‘欢乐‘, ‘愉悦‘, ‘愉快‘, ‘快乐‘, ‘欢喜‘, ‘喜悦‘, ‘欢欣‘, ‘欢畅‘, ‘欢腾‘, ‘雀跃‘, ‘欢快‘];
            this.colo = [‘#FF69B4‘, ‘#ff6651‘, ‘orange‘, ‘#FF00FF‘, ‘#00FF7F‘, ‘#00BFFF‘, ‘#BA55D3‘];
            //获取body元素
            this.elBody = document.getElementsByTagName("body")[0];
            //初始化randomNum
            this.randomNum = null;
            //初始化字体inde
            this.finde = 0;
            //初始化className
            this.cls = 0;
        }
        
        //定义初始化
        ClickFrontShow.prototype.init = function(frontArray, colorArray) {
            //自定义颜色和字体
            this.fron = frontArray || this.fron;
            this.colo = colorArray || this.colo;
            
            this.listenMouse();
        }
        
        //创建文字 
        ClickFrontShow.prototype.createFront = function (classname) {
            var self = this;
            let ospan = document.createElement(‘span‘);
            //设置样式
            let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
            //随机字体和颜色
            let randomFront = self.fron[self.finde];
            let randomColor = self.colo[Math.round(Math.random()*(self.colo.length-1))];
            //字体下标增1
            self.finde = (self.finde+1) % self.fron.length;
            //向body中添加元素
            self.elBody.appendChild(ospan);
            //绑定一个classname
            ospan.className = String(classname);
            //添加样式
            ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
            ospan.style.color = randomColor;
            ospan.innerHTML = randomFront;
        }
        
        
        //监听鼠标点击
        ClickFrontShow.prototype.listenMouse = function() {
            var self = this;

            //鼠标点击事件
            document.onclick = function(e) {
                //避免classname值重复导致出现bug
                if(self.cls === 20){
                    self.cls = 0;
                }else{
                    self.cls += 1;
                }
                //创建文字
                self.createFront(self.cls);
                let el = document.getElementsByClassName(self.cls)[0];
                
                //鼠标点击位置
                el.style.left = e.clientX + ‘px‘;
                el.style.top = e.clientY + ‘px‘;
                
                //过时改变
                setTimeout(function() {
                    el.style.opacity = 0;
                    el.style.top = el.offsetTop - 100 + ‘px‘;
                }, 100);
                //过时清除
                setTimeout(function() {
                    self.elBody.removeChild(el);
                }, 2000);
            }
            
        }
        
        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }
        
    </script>
    <style>
        p::selection{
            background:pink;
            color:#fff;
        }
        p{
            cursor: url(cursor.png),auto;
        }
    </style>
</head>
<body>
    <p style="margin:50px auto;width:600px;line-height:30px;">JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] 
        JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] 
        JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]</p>
</body>
</html>

以上是关于鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片的主要内容，如果未能解决你的问题，请参考以下文章