最后更新时间:2017-11-22
有些网站在鼠标点击的时候有添加+1这种红色数字慢慢变大变淡的淡出和上升效果,觉得蛮有趣的,但是不管是随机数字还是累积数字,用久了闲鱼觉得还是蛮单调的,而这里闲鱼要介绍的就是一个将数字变成一个爱心物件淡出的效果,作为页面的装饰,点击鼠标的时候就会弹出这种意外的小惊喜,然后消失,会让网页不会显得那么单调。
代码部署
方法也很简单,废话不多说,直接说部署方法和代码
①、JS代码
将以下代码保存为js文件,直接引入使用,点击页面任意位置就可以看到效果了,代码来自逐梦博客。
- (function(window,document,undefined){
- var hearts = [];
- window.requestAnimationFrame = (function(){
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function (callback){
- setTimeout(callback,1000/60);
- }
- })();
- init();
- function init(){
- css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
- attachEvent();
- gameloop();
- }
- function gameloop(){
- for(var i=0;i<hearts.length;i++){
- if(hearts[i].alpha <=0){
- document.body.removeChild(hearts[i].el);
- hearts.splice(i,1);
- continue;
- }
- hearts[i].y--;
- hearts[i].scale += 0.004;
- hearts[i].alpha -= 0.013;
- hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
- }
- requestAnimationFrame(gameloop);
- }
- function attachEvent(){
- var old = typeof window.onclick==="function" && window.onclick;
- window.onclick = function(event){
- old && old();
- createHeart(event);
- }
- }
- function createHeart(event){
- var d = document.createElement("div");
- d.className = "heart";
- hearts.push({
- el : d,
- x : event.clientX - 5,
- y : event.clientY - 5,
- scale : 1,
- alpha : 1,
- color : randomColor()
- });
- document.body.appendChild(d);
- }
- function css(css){
- var style = document.createElement("style");
- style.type="text/css";
- try{
- style.appendChild(document.createTextNode(css));
- }catch(ex){
- style.styleSheet.cssText = css;
- }
- document.getElementsByTagName('head')[0].appendChild(style);
- }
- function randomColor(){
- return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
- }
- })(window,document);
②、引用JS
在底部footer.php文件中引用js即可
- <script src="http://www.macrr.com/xxxxxx.js"></script>
效果在本站就可以看到,鼠标在任意位置点击一下,同时多次点击可以发现爱心的颜色也会随机变化
。因为是个人博客,闲鱼就喜欢随心所欲折腾,当然,也不想变得太非主流......

本文最后更新于2017年11月22日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
历史上的今天:
- 2020: 华医网:《医疗机构药事管理规定》解读答案
- 博客公众号
- 关注本博客公众号
-
- 博客小程序
- 关注本博客小程序
-
2020年2月28日 下午5:37 29楼
不行的亲们把
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
这两句改为
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha<=0){
试一下
2018年7月9日 下午5:23 28楼
既然说不能用,我来试试。
2017年8月4日 下午8:00 27楼
为啥没效果呀步骤没错呀
2017年7月23日 上午1:24 26楼
为何试了没用撒
2017年7月23日 上午9:34 1层
@无人小站 不会吧,应该是有效果的
2017年7月23日 上午10:06 2层
@闲鱼 昨天晚上试了几下都没有_(=з」∠)_
2017年3月19日 下午4:18 25楼
鱼哥您好:请问你的点赞和标签,悬浮按钮美化代码有没有教程呢?
2017年3月19日 下午4:57 1层
@堆爱博客 没有,说实话这都是改的一些CSS,根据自己喜欢罢了
2017年1月1日 下午6:46 24楼
你好,冰凌千品前来学习了
2016年12月21日 下午10:27 23楼
学习学习先,wordpress建站不懂代码折腾起来,还真的好累啊,要优化的代码太多太多了。
2016年12月8日 下午10:05 22楼
这个学习了 首次来访 不知道能不能换个友链
2016年12月10日 上午8:45 1层
@胡渝个人博客 先友后链吧
2016年12月7日 下午12:04 21楼
闲鱼,footer.php到底是怎么引用js代码的我直接用 不行呀
2016年12月10日 上午8:44 1层
@道武 我感觉我已经说得很清楚了~