侧边栏壁纸
博主头像
zzzgd博主等级

一忘皆空!

  • 累计撰写 18 篇文章
  • 累计创建 11 个标签
  • 累计收到 15 条评论

引入2dlive, 鼠标指针点击特效, 鼠标指针图标自定义

zzzgd
2021-06-23 / 0 评论 / 0 点赞 / 310 阅读 / 5,001 字
温馨提示:
本文最后更新于 2021-07-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 2dlive

页面左下角的可动人偶.

使用方法, 具体参考 https://github.com/stevenjoezhang/live2d-widget
最好是fork到自己的仓库, 然后使用自己的cdn地址

<head>标签中增加:

<script src="https://cdn.jsdelivr.net/gh/zzzgd/live2d-widget@latest/autoload.js"></script>

如果是halo的主题修改, 也可以在主题提供的的js设置中直接设置, 如:

image.png

2. 鼠标点击特效

就是页面的点击出现的烟花效果, 其他效果的话网上也有很多, 可以找找对应的js.

方法和上面一样的 直接引入js

<script src="https://zzzgd.info/upload/shubiao.js"></script>

当然, 也推荐将这个js放到自己的服务器上, 然后用自己的js, 毕竟别人的可能哪一天就失效了

完整的js:

class Circle {
	  constructor({ origin, speed, color, angle, context }) {
		      this.origin = origin
		      this.position = { ...this.origin }
		      this.color = color
		      this.speed = speed
		      this.angle = angle
		      this.context = context
		      this.renderCount = 0
		    }

	  draw() {
		      this.context.fillStyle = this.color
		      this.context.beginPath()
		      this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
		      this.context.fill()
		    }

	  move() {
		      this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
		      this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
		      this.renderCount++
		    }
}

class Boom {
	  constructor ({ origin, context, circleCount = 10, area }) {
		      this.origin = origin
		      this.context = context
		      this.circleCount = circleCount
		      this.area = area
		      this.stop = false
		      this.circles = []
		    }

	  randomArray(range) {
		      const length = range.length
		      const randomIndex = Math.floor(length * Math.random())
		      return range[randomIndex]
		    }

	  randomColor() {
		      const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
		      return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
		    }

	  randomRange(start, end) {
		      return (end - start) * Math.random() + start
		    }

	  init() {
		      for(let i = 0; i < this.circleCount; i++) {
			            const circle = new Circle({
					            context: this.context,
					            origin: this.origin,
					            color: this.randomColor(),
					            angle: this.randomRange(Math.PI - 1, Math.PI + 1),
					            speed: this.randomRange(1, 6)
					          })
			            this.circles.push(circle)
			          }
		    }

	  move() {
		      this.circles.forEach((circle, index) => {
			            if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
					            return this.circles.splice(index, 1)
					          }
			            circle.move()
			          })
		      if (this.circles.length == 0) {
			            this.stop = true
			          }
		    }

	  draw() {
		      this.circles.forEach(circle => circle.draw())
		    }
}

class CursorSpecialEffects {
	  constructor() {
		      this.computerCanvas = document.createElement('canvas')
		      this.renderCanvas = document.createElement('canvas')

		      this.computerContext = this.computerCanvas.getContext('2d')
		      this.renderContext = this.renderCanvas.getContext('2d')

		      this.globalWidth = window.innerWidth
		      this.globalHeight = window.innerHeight

		      this.booms = []
		      this.running = false
		    }

	  handleMouseDown(e) {
		      const boom = new Boom({
			            origin: { x: e.clientX, y: e.clientY },
			            context: this.computerContext,
			            area: {
					            width: this.globalWidth,
					            height: this.globalHeight
					          }
			          })
		      boom.init()
		      this.booms.push(boom)
		      this.running || this.run()
		    }

	  handlePageHide() {
		      this.booms = []
		      this.running = false
		    }

	  init() {
		      const style = this.renderCanvas.style
		      style.position = 'fixed'
		      style.top = style.left = 0
		      style.zIndex = '999999999999999999999999999999999999999999'
		      style.pointerEvents = 'none'

		      style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
		      style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

		      document.body.append(this.renderCanvas)

		      window.addEventListener('mousedown', this.handleMouseDown.bind(this))
		      window.addEventListener('pagehide', this.handlePageHide.bind(this))
		    }

	  run() {
		      this.running = true
		      if (this.booms.length == 0) {
			            return this.running = false
			          }

		      requestAnimationFrame(this.run.bind(this))

		      this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
		      this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

		      this.booms.forEach((boom, index) => {
			            if (boom.stop) {
					            return this.booms.splice(index, 1)
					          }
			            boom.move()
			            boom.draw()
			          })
		      this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
		    }
}

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()

创建一个js文件, 复制内容到js. 然后上传到附件拿到这个js的链接地址. 配到页面中就好

3. 鼠标指针自定义

如博客中的小黄鸡, 先去一个在线生成ico的网站, 做一个小图标的箭头, 可以和这个一样配一个小黄鸡或者其他的东西, 或者直接搜索鼠标指针的ico, 同样的上传附件后拿到链接.

在css中配置, 主题的话在 /module/styles.ftl<style>标签里最后加上就行

body{ cursor: url(upload/2021/06/cursor-48e955eba4964c1eb4ac923fa05b8f61.ico),auto;}

0

评论区