早年我在玩WordPress的时候喜欢各种花里胡哨的东西,什么canvas-nest,网页下雪特效,网页复制弹窗,鼠标样式,鼠标点击特效等等,但随着年纪的增长慢慢对这些不太感兴趣了,博客搬家之后只保留了部分特效,写篇文章记录一下
这些大多为JavaScript代码,在WordPress中先引入Jquery库然后粘贴或者封装引入即可,这里还有个即时预览的方法,在webkit浏览器(Chrome等)按下F12检查,在console里面粘贴一下代码,然后回车执行即可看到效果了,以下部分特效叠加使用不起作用
页面下雪特效

代码较长,JS源码如下 sonwy.js
Canvas-nest网状特效
color:画布线颜色,默认值:'0,0,0'; 颜色为(R,G,B),opacity:线的不透明度(0〜1),默认值:0.5,count:行数,默认值:150,setTimeout:网页上出现的延迟
1 2 3 4 5 6 7 8 9 10 11 12 |
!function() {function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1]; return{ l:o, z:n(i,"zIndex",-1), o:n(i,"opacity",.5), c:n(i,"color","0,0,0"), n:n(i,"count",99) } }function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight }function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]), setTimeout(function(){i()},100)}(); |
鼠标点击文字特效
1 2 3 4 5 6 7 8 9 |
var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("富强", "民主", "文明", "和谐", "爱国", "敬业", "友善" ,"诚信");var $i = $("").text(a[a_idx]); a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999,"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();});});});var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?068e8f57dc240ec2a0129120cf63a255"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); |
鼠标点击随机颜色爱心特效
爱心的基本样式在function(n)里,随机颜色则是由function(s)里的rgb*Math.random来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
! function (e, t, a) { function n() { c(".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;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) }function o() { var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) { t && t(), i(e)} } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(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 s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"} var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document); |
WordPress复制内容跳出提示框
打开WordPress的footer.php文件,在此<?php endif; ?>之前,加入下面的代码就可以了
1 2 3 4 5 6 |
<script type="text/javascript"> document.body.oncopy=function(){ alert("复制成功!若要转载请务必保留原文链接, 本文来自阿蔡不菜个人博客,谢谢合作!"); } </script> |
切换页面标题变换
详情可查看文章- JavaScript实现切换标签时,改变原页面标题
纯CSS画的玩偶-Eevee
footer.php中的</body>前加入以下代码,同时在header.php中引入CSS,也可直接写在style.css里
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div class="eevee"> <div class="body"> <div class="head"> <div class="ears"> <div class="ear"> <div class="lobe"></div> </div> <div class="ear"> <div class="lobe"></div> </div> </div> <div class="face"> <div class="eyes"> <div class="eye"> <div class="eyelid"></div> </div> <div class="eye"> <div class="eyelid"></div> </div> </div> <div class="nose"></div> <div class="mouth"></div> </div> </div><!--head--> <div class="chest"> <div class="fur"> <div class="patch"></div> </div> <div class="fur"> <div class="patch"></div> </div> <div class="fur"> <div class="patch"></div> </div> </div><!--chest--> <div class="legs"> <div class="leg"> <div class="inner-leg"></div> </div> <div class="leg"> <div class="inner-leg"></div> </div> <div class="leg"> <div class="inner-leg"></div> </div> <div class="leg"> <div class="inner-leg"></div> </div> </div><!--chest--> <div class="tail"> <div class="tail"> <div class="tail"> <div class="tail"> <div class="tail"> <div class="tail -end"></div> </div></div></div></div> </div><!--tail--> </div><!--body--> </div><!--eevee--> |
更多CSS特效可查看文章-如何用CSS画一个小猪佩奇
© 著作权归作者所有
文章评论(0)