鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标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>

原文地址：https://www.cnblogs.com/chenyingying0/p/12690295.html

时间： 2024-10-03 23:16:38

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

JavaScript 获取鼠标点击位置坐标

转自:http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html 在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件scr

鼠标点击事件

1 鼠标点击事件 2 onclick 元素上发生鼠标点击时触发. 3 ondblclick 元素上发生鼠标双击时触发. 4 ondrag 元素被拖动时运行的脚本. 5 ondragend 在拖动操作末端运行的脚本. 6 ondragenter 当元素元素已经被拖动到有效拖放区域时运行的脚本. 7 ondragleave 当元素离开有效拖放目标时运行的脚本. 8 ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本. 9 ondragstart 在拖动操作开端运行的脚本. 10 on

鼠标点击特效：点击网站页面显示24字核心价值观上升的特效代码

将以下代码直接写入html中即可(也可以去掉首尾,添加进js文件中,然后在html中包含这个文件) <script type="text/javascript"> /* 鼠标点击特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", &q

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当前简约的页面制作方法. 只要你们有需求,我会尽量帮助到大家,在此感谢各位广大粉丝的支持和理解,我会尽量做到最好,希望小主们不要吝啬你们的支持和推荐,动动小手顶一顶,非常感谢大家长久的陪伴~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Me

鼠标点击网页出现文字特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JavaScript获取鼠标点击坐标

如何用JavaScript获取鼠标点击时在canvas画布上的坐标呢: 代码如下: -------------------------------------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6

处理鼠标点击物体事件

如果需要处理鼠标点击物体的情况: using UnityEngine; using System.Collections; public class example : MonoBehaviour { void OnMouseOver() { renderer.material.color -= new Color(0.1F, 0, 0) * Time.deltaTime; } }

html5中canvas的使用 获取鼠标点击页面上某点的RGB

1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 需要谷歌的一个html5.js的文件即可. 注意:必须插入在<head></he

Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

由于Canvas的 "忘记式" 绘图机制(就是它没有维护一份绘制元素的列表). 如果仅仅检测用户是否点击整个canvas元素,只需在canvas上注册事件就好. 如果是要分别检测canvas里绘制的不同元素的鼠标点击事件,则要用下面的做法,实现一个元素管理器. 一.原理分析 1.canvas元素能提供的一个api是,context.isPointInPath(x,y),它可以判断参数的点是否在当前路径内. 2.当前路径指的是最近一次调用context.beginPath();当前路径c