在博客添加鼠标特效跟随鼠标移动的线条《转》

原文:http://www.cnblogs.com/Sharley/p/9603129.html

设置方式是在博客的“管理-->设置”,然后在设置中的页脚HTML代码中添加

<script>

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

 }();

 </script>

  

原文地址:https://www.cnblogs.com/yz-sharedblog/p/9910527.html

时间: 2024-11-08 23:56:41

在博客添加鼠标特效跟随鼠标移动的线条《转》的相关文章

博客样式(动态背景线条跟随鼠标移动)

代码(将代码添加至页脚html板块): 1 <!--代码放置于</body>上方--> 2 3 <script> 4 5 !function(){ 6 7 function n(n,e,t){ 8 9 return n.getAttribute(e)||t 10 11 } 12 13 function e(n){ 14 15 return document.getElementsByTagName(n) 16 17 } 18 19 function t(){ 20 21

杨泽业:给你的wordpress博客添加留言板的功能

添加一个留言板的功能相对来说,还是比较好的用户体验,比如某个用户,在你的专业里面,有需要向你咨询的地方,而生适合公开发布的话,用户直接给你留言即可,你回复他以后,他就能通过邮箱收到通知,提醒查看回复的答案. 基于这样的原因,泽业建站网就教大家添加留言板的功能. 第一步:添加一个叫做[给我留言]的独立的页面. 方法:后台--页面--新建页面,填写好标题,自定义url,在加上一句你想说的话就可以发布了. 给你的博客添加留言的功能 到了这一步,给我留言的页面还是无法评论(留言)的,怎么办呢?其实也是很

给博客添加Flash时钟

依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的.不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示. 想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了.稍稍问了一下度姑娘,还真找到了解决方案,总结如下: 1.添加object标签 既然说支持

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

hexo next主题为博客添加分享功能

title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 --- 今天心血来潮,决定给博客添加分享功能,百度上首先是找到了使用shareSDK的分享功能,最后在实践的过程中发现它添加时步骤比较多,添加完成后效果比较丑(就是一个长条的浅蓝色按钮),而且点击后想要退出分享比较麻烦(它的取消按钮实在太难找了,它在页面最下方的位置,呈现浅灰色,这个设计太反人类了

杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站

我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个是怎样实现的呢?其实很简单,下面我就将核心文件和代码分享给大家. 第一步:添加语录功能的核心文件. 在网站的根目录里面添加一个yulu的文件夹,里面含有index.php和yulu.txt两个文件.其中index.php里面是核心代码,yulu.txt是要显示的经典语录,一条占用一行. 文末免费给出了所

杨泽业:给你的wordpress博客添加SMTP邮件服务,评论以后邮件通知

当你的博客有人评论的时候,就会收到邮件通知,那是非常好的体验,有人评论了自己第一时间知晓.特别是,有人在你的博客留言,需要有人解答问题的时候,这个人是迫切的需要及时通知的,有的评论自动邮件通知的话,那么就轻松了. 要实现评论邮件通知,还是不难的.下面,我就说说,使用腾讯的免费企业邮箱配置SMTP邮件服务.(没有企业邮箱的请查看我上一个文章<用你自己的域名免费的开通腾讯企业邮箱图文教程>) 先在模板函数 (functions.php)文件底部添加下面代码即可,邮箱的帐号密码改成自己的帐号密码.

#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能

原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需要花费不少的精力,大多数朋友和蜗牛一样都是利用自己业余时间对博客进行管理与维护(如果大家觉得蜗牛789文章能起到一定帮助作用,也欢迎对蜗牛进行打赏,目前大家可以通过支付宝扫红包活动对蜗牛进行打赏,无需自己掏腰包#每日#支付宝扫码最高领取99元红包 可用于店面消费或捐赠蜗牛). 在此文章中蜗牛为大家分

Hexo博客添加在线联系功能

title: Hexo博客添加在线联系功能 date: 2018-08-29 21:03:11 tags: - 博客 - git - hexo - 博客优化 categories: 搭建博客 --- Hexo博客添加在线联系功能 Hexo博客如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务,当有用户在网页上给你留言后会通过邮件或者微信通知你,可以及时的解答用户的疑问. 最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示: 配置方法如下: 首先到DaoVoice上注册