博客园鼠标滑动线条吸附效果

<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/dongsq/p/10188291.html

时间: 2024-10-27 13:05:46

博客园鼠标滑动线条吸附效果的相关文章

博客园鼠标点击彩蛋特效

博客园是一个很开放的平台,大家都可以在里面美化自己的博客,把自己的博客变得多彩. 鼠标的特效花了我很长的时间,下面我把如何做成“鼠标点击彩蛋特效”告诉大家. 1.应把鼠标点击特效的代码放在哪里 把代码放在页脚Html代码处 2.代码实现 1 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script> 2 <canvas width="

博客园鼠标效果:24字社会主义核心价值观

<script type="text/javascript"> $(document).ready(function(){ var a_index = 0; var c_index = 0; $("body").click(function(e){ var a = new Array("富强", "民主", "文明", "和谐", "自由", "

博客园鼠标点击特效代码

<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?",&

修改博客园推荐人数增加W效果

今天逛园子,偶然看到最多推荐,有点好奇. F12查看元素,发现是在css中加了一个after,内容中增加了一个"w". 本着娱乐至上的准则,自己也试试.复制以下css到设置自定义css中 #digg_count:after{ content: 'w'; } :after, :before { webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; }

Python 使用selenium实现自动登录博客园

需要做的准备: 本文章是使用Chrome,所以需要Chormedriver.exe,具体的下载过程可以百度查到 Selenium是一种自动化测试工具,能模拟浏览器的行为,所以今天我就模拟一下浏览器登陆博客园的行为. 首先,分析问题,登陆博客园需要做些什么: 1.打开浏览器 2.输入博客园主页的网址 3.点击登陆按钮,等待页面跳转 4.输入账号密码,点击登陆 知道了步骤,接下来我们用代码来实现它:from selenium import webdriverimport time#创建登陆类 fro

博客园添加鼠标粒子吸附特效

本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博客园的[管理] → [设置]→ 一直往下拉, 找到[博客侧边栏公告(支持HTML代码)(申请JS权限)] 向[email protected] 发送邮件, 为了尽快通过权限申请, 邮件模板如下: 尊敬的博客园管理员: 请问是否可以帮我开通js权限,我需要一些简单的js来解决问题,例如鼠标点击特效.代

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

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

博客园添加鼠标点击特效

原文:http://www.cnblogs.com/xiaokang01/p/9911501.html 废话少说先看效果: 复制下面代码,点击博客园 管理-->设置 然后 在保存就好了 代码如下 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g