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"name="viewport" content="width=device-width,initial-scale=1.0"title>demo2</script type='text/javascript' src='http://api.dujin.org/js/aixintexiao.js'></scriptbodyp 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]phtml>
效果图
也可以直接放源码
<script type="text/javascript"> /* 缙哥哥博客鼠标点击显示不同颜色爱心特效JS代码 https://www.dujin.org/12146.html */ !function(e,t,a) { 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) } n() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = (e) { t && t(),o(e) } } o(e) { var a = t.createElement("div"); a.className = "heart",s.push({ el: a,x: e.clientX - 51 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) } 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 || (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(($) {
$("body").click((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: x,"position": "absolute"
});
$("body").append($i);
$i.animate({
"top": y - 180
},1500,() {
$i.remove();
});
});
});
</script>
别忘了引入jQuery
效果图
配上::selection改变文字选中颜色，效果还是蛮不错的
="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body).click((e) { a new Array(富强民主文明和谐自由平等公正法治爱国敬业诚信友善); $i = $(<span/>).text(a[a_idx]); a_idx (a_idx + 1) % a.length; x e.pageY; $i.css({ z-index: 999999999999999999999999999999999999999999999999999999999999999999999top: y - 20leftpositionabsolutefont-weightboldcolor#ff6651 }); $().append($i); $i.animate({ 180opacity1500() { $i.remove(); }); }); }); > p::selection{ background:lightblue; color#fff; } >
window.onload () { //定义点击出现文字类 ClickFrontShow() { 定义所需文字和颜色 this.fron ['高兴开心❤欢乐愉悦愉快快乐欢喜喜悦欢欣欢畅欢腾雀跃欢快]; .colo #FF69B4orange#FF00FF#00FF7F#00BFFF#BA55D3获取body元素 .elBody document.getElementsByTagName()[初始化randomNum .randomNum null; 初始化字体inde .finde 初始化className .cls ; } 定义初始化 ClickFrontShow.prototype.init (frontArray,colorArray) { 自定义颜色和字体 frontArray || .fron; colorArray .colo; .listenMouse(); } 创建文字 ClickFrontShow.prototype.createFront (classname) { self ; 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 self.finde (self.finde+ 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 () { ; 鼠标点击事件 document.onclick (e) { 避免classname值重复导致出现bug if(self.cls === ){ self.cls ; }else{ self.cls += ; } 创建文字 self.createFront(self.cls); let el document.getElementsByClassName(self.cls)[]; 鼠标点击位置 el.style.left e.clientX px; el.style.top e.clientY ; 过时改变 setTimeout(() { el.style.opacity ; el.style.top el.offsetTop 100 ; },1)">100); 过时清除 () { self.elBody.removeChild(el); },1)">2000); } } 实例化 frontShow ClickFrontShow(); 用户可在此传递参数，默认第一个参数是字体数组； 第二个参数是颜色数组，必须是数组类型！ frontShow.init(); } pink>
效果图
首先自己做个png小图，或者网上找一个
设置cursor: url(cursor.png),auto;
效果图
} p cursor url(cursor.png),auto>
