动态线条,随鼠标移动吸附效果
现在许多博客园个人首页里面的动态背景加入了动态线条,那这是怎么设置添加的呢,接下来告诉你具体操作,很简单
1.点开博客园个人首页,管理
2.点开设置
3.找到博客侧边栏公告,申请添加JS权限后,
注意:申请权限不通过或没申请,在添加代码时会出现异常,自动清除代码内容
添加代码:
<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>
具体操作如下图:
4.最后点击保存就可以了,然后返回个人首页看效果,效果如下:
转载于:https://www.cnblogs.com/lzw123-/p/9394886.html
动态线条,随鼠标移动吸附效果相关推荐
- 网页动态背景——随鼠标变换的动态线条(鼠标蜘蛛网特效)
网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
- 网站动态背景线条跟随鼠标移动,吸附鼠标效果代码
经常看到有些SEO博客网站上有这种用动态线条作为网站背景的效果,当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效,鼠标离开的时候线条就自动散开.这个效果之前在我的博客上也有加过,后来网站改版就没有继 ...
- 网页背景动态线条 鼠标吸附动态线条效果的实现
经常在浏览网页的时候看到有鼠标能够吸附动态线条的动画效果,如下所示 觉得很酷炫,百度了一下(记录下来,以后就可以使用了),效果是用一段js代码实现的,如下所示 <script> !func ...
- 网站动态背景线条跟随鼠标移动,吸附鼠标效果
网站动态背景线条跟随鼠标移动,吸附鼠标效果 动态背景线条,鼠标移动可以吸附,可以添加配置,代码如下: <!DOCTYPE html> <html lang="en" ...
- 屏蔽博客园背景动态线条
1. 问题描述 由于博客园允许用户添加含js的html代码来装饰自己的博客界面,这导致很多人跟风地给自己博客添加背景动态线条.live2D等,其中动态背景线条如下图所示: 它不停地随机生成线条,并漂浮 ...
- 博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博 ...
- Hexo博客主题Next添加动态线条背景canvas_nest
欢迎光临我的博客查看最新文章: https://river106.cn Hexo 版本:5.4.0 Next版本:8.7.1 为了美化Hexo博客,可以给博客添加动态线条背景,这里使用canvas_ ...
- html5页面中鼠标悬停效果,CSS实例:非常不错的鼠标悬停TIP效果!_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
- 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...
前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
最新文章
- access导出MySQL表格_如何将Access数据库里的表内容导出到Excel
- libjpeg的问题
- C# in Depth-类型系统的特征
- SQL Server2000企业管理器在Win7中新建表错误的解决方法
- 工作做事通用方法探索
- 将一个数转化为二进制java_java将一个整数转化成二进制代码示例
- [转]iOS技巧之获取本机通讯录中的内容,解析通讯录源代码
- mobi格式转换成pdf格式
- qq空间留言板删除 php,qq批量删除空间留言及说说
- 程序员的发展之道---海贼王(山治)
- 测绘资质高性能数据服务器,测绘资质分级标准2020年
- May 17th Thursday (五月 十七日 木曜日)
- `include “uvm_macros.svh“引发的思考
- 蓝桥杯单片机设计与开发_标准模板
- 网页中常用的js特效
- vue 动态生成下载二维码
- Python编写简单的计算器,用户输入两个数字和一个四则运算符,计算结果
- 周文康的大一Python学习心得体会
- Docker 退出容器不停止容器运行
- GEEer成长日记十七:在Google Earth Engine(GEE)中批量下载MODIS NDVI数据
热门文章
- oracle实时监控触发邮件,利用EasySQLMAIL实现数据库订单监控和邮件发送
- git常见使用场景总结
- 在C 函数中保存状态:registry、reference和upvalues
- bat批处理重命名问题
- 第三部分:MFC中控件的样式
- [C# 开发技巧系列] 使用C#操作幻灯片
- 产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复。
- 页面如何让它不显示标题栏,菜单栏,工具栏,地址栏
- python定义一个空数组_python如何创建空数组?
- python语言及其应用下载_Python语言及其应用 中文pdf完整版[13MB]