网页鼠标隐藏怎么实现?

.evanyou 效果-彩带的实现,效果如下


注:这个主要用的是 Canvas 画布实现的,点击背景绘制新的图形,代码如下:

5. 在离开网页时,触发事件(这里以改变标题为例)

注:这里鼠标移开时,同时改变网页 title 和 icon 图标,代码如下

6. 移入网页时改变鼠标的样式

PS:这个只要在样式里面设置即可,也就是移入时显示一张图片,代码如下:

7. 文字向上滚动效果(PS:鼠标悬停停止滚动)


PS:鼠标移入,使区域旋转变色

9. 旋转星空,点击放烟花效果

10. 点击弹出指定的内容


PS:点击弹出显示内容,过一会自动消失, 说白了也就是一个弹出内容插件,比 alert 好看些,代码如下

利用上面的插件还可以实现 confirm 选择效果



}
  鼠标移入元素时显示隐藏的内容,这是网页中常见的特效。如果触发者和弹出者是父子嵌套关系比较好解决,如果是非嵌套关系,解决起来就比较麻烦了。因为要判断鼠标在不在区域内,网上多数文章都介绍使用/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  •  /*看官在复制js代码时,需要应避免示例中的命名与您自身的命名相同,要不然会污染变量哦......*/
  •    /*鼠标移入时*/
  •    /*改变i的值*/
  •    /*激活自身*/
  •    /*鼠标移开时*/
  •    /*改变i的值*/
  •    /*延迟150毫秒后判断*/
  •      /*表示移开后并没有移入到m-bd身上,所以可以隐藏m-bd了*/
  •    /*鼠标移入时*/
  •    /*改变j的值*/
  •    /*鼠标移开时*/
  •    /*改变i的值*/
  •    /*延迟150毫秒后判断*/
  •      /*表示移开后并没有移入到m-bd身上,所以可以隐藏m-bd了*/
  • 由于源码中含有大量的注释,所以看起来比较多,如果看官不需要注释,全部删除/**/这样的代码即可。为了更好的检验下这个效果,请猛戳下方的demo。

    至于插件,就下次有空再写吧。今天主要是讲下原理。如果看官能理解,插件也没问题。

      若亲想转载本文到其它平台,请务必保留本文出处!

    若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

}

我要回帖

更多关于 鼠标不用时隐藏 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信