相关文章推荐
逃跑的棒棒糖  ·  java list ...·  2 年前    · 
很酷的钢笔  ·  57-【kubernetes】Ingress ...·  2 年前    · 

有时候,会需要 鼠标移入 修改为自定义的鼠标指针,或者是修改 页面中 的鼠标指针,达到不同的效果。

使用鼠标指针的CSS属性 cursor: url(‘.png图片地址’), auto;
auto,也可写其他的cursor的属性值,此处用以找不到url图片资源时(建议30x30像素的),则使用后一个属性。

!!!需要注意的是图片素材不要太大,一般是 30*30范围内, 否则没有效果!!!

1. 移入的自定义鼠标指针
(1)方式一:CSS

// html
<div class="myBox"></div>
// css
.myBox {
  cursor: url('../../assetsimage/xuanranimg.png'), pointer
  // cursor: url('~/assetsimage/xuanranimg.png'), pointer
  // cursor: url('@/assetsimage/xuanranimg.png'), pointer
  // cursor: url('http://m.qpic.cn/psc?/V13dUHVk0Pe4ls/bqQfVz5yrrGYSXMvKr.cqeBNmgWO0Lgic8tXhzIHInZwTPZRK*fjgbCusKpq6PinpNt0MXcIV977rKJp9OmcY*vZmFxFOqDszqAN1mUrRPs!/mnull&bo=IAAgAAAAAAADByI!&rf=photolist&t=5'), pointer

(2)方式二:行内变量拼接
注意:这里的 `` 是模板字符窜,不是单引号!!!

// img: require('@/assets/image/xuanranimg.png')
<div :style="{cursor: `url(${img}), auto`}"></div>

2. 改变整个页面的鼠标指针
点击某个元素后,再JS改变鼠标指针(以下是VUE环境的写法,其他大致类似)

// html
<div @click="clickedFun">点击<div>
// js
data() {
  return {
    img: require('@/assets/image/xuanranimg.png')
methods() {
  clickedFun() {
     let body = document.querySelector('body') // 这里是把整个页面的鼠标指针都变了,可以指定某个元素范围内
     body.style.cursor = `url(${this.img}), pointer` // 注意:这里的 `` 是模板字符窜,不是单引号!!!

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

<span style="cursor:auto">Auto</span><br /> <span style="cursor:crosshair">Crosshair</span><br /> <span style="cursor:defa... 改变鼠标指针形状的方法有两种;第一种:用的来改变鼠标指针形状。另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状         我们先来看第一种:用来改变鼠标指针形状。 CSS样式 <style> .test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;} .test td{padding:2px 10px;border:1px solid #ddd;} .test td:hover{background:#eee;} .auto{cursor:auto;} .default{cursor:default;} 如果toView的值是动态从接口获取进行setData的话,需要注意异步问题,可以在setData的回调函数处理 [code=javascript] fetchChatList() { const { page, size, limit, messages } = this.data app.Ai._chatList({ page, size, limit }).then((res) => { const list = res.list.reverse() this.setData( messages: [...messages, ...list] || [], hasMore: res.more, time: list[0].content_time, () => { // 滚动到底部 this.setData({ toView: `msg-${list.length - 1}`, [/code]
VUE:img标签加载图片失败时,显示一张自定义默认图片 juntian123: VUE:vue3.x使用图片裁剪插件vue-picture-cropper 前端-如此如此。: 选择的原图,能看到的 裁剪后生成的图,在handleModalSure中,不进行displayCropModal的false赋值,再次调用initCropInfo(file)即可