利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码
来源:互联网 发布:淘宝宝贝详情图尺寸 编辑:程序博客网 时间:2024/05/18 01:25
今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。
其实主要注意几点细节就可以轻松实现这样的功能了,第一点就是设置一个div不显示并且位置设置好,第二点就是利用JQuery中监听鼠标的方法来监听鼠标的移动或者离开。
理论就这些,下就给出一个具体的例子详细的介绍一下该过程是如何实现的。
<footer> <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p> <div id="tbox"> <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none"> <img src="images/weixing-ma.jpg"> </div> <div style="float:right;"><a id="togbook" href="#"></a></div> <div style="float:left"><a id="gotop"></a></div> </div></footer><script type="text/javascript"> $("#gotop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollTop: 0 }, speed); return false; }); $("#togbook").on('mouseover',function(){ $("#log_id").css("display","block"); }); $("#togbook").on('mouseout',function(){ $("#log_id").css("display","none"); });</script>先来解释一下上面的代码,mouseover指的是当鼠标移动到”#togbook”这个div的上方的时候就会触发该函数,然后执行div显示的代码。
mouseout指的是当鼠标从”#togbook”这个div的上方离开的时候就会触发该函数,然后执行div隐藏的代码。通过这两个简单函数就可以实现该过程了。
这里div显示位置,大家可以自己设置,我是将这个div设置在左上面。
运行截图:
如博客内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534
2 0
- 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码
- 1、当鼠标移动到目标上的时候,自动显示一个提示框。
- halcon读取二维码的时候显示的读取结果一直闪烁
- 图片上传生成缩略图,并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- 网页背景图片不显示的时候怎么使用背景色?
- 使用Zxing扫描二维码的时候,图片变形
- jsp js 鼠标移动到指定区域显示选项卡示例,离开时不显示
- 在MFC中,想要实现当鼠标移动到某个标签中的时候鼠标变成超链接时候的“手”状
- 当menu显示不出来的时候
- (4)鼠标移动某个区域时候显示内容,移出某个区域的时候隐藏某个内容
- 适合在留言本或注册时候用的效果(鼠标移动后显示不同文字)
- jquery实现表格随着鼠标的移动而显示亮色
- myeclipse调试的时候鼠标放在变量上不显示变量的值
- 鼠标悬停和离开显示不同的图片
- 自己构造一个Tree类,当鼠标移动到树的节点上的时候用提示框显示该节点的信息
- 当鼠标移动到图片上时,跟随鼠标显示放大的图片
- 当滚动鼠标滚轮离开tracking区域的时候,mouseExited不被调用的问题
- java中怎样实现当鼠标移动到按钮的时候有提示文字出现
- 个人上网行为安全保护解决方案
- android studio测试--JUnit
- SQL的主键和外键约束
- OFBiz入门01 - 概况
- 前端复习--一些感悟
- 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码
- 校招
- c指针
- Java 自动装箱与拆箱
- Hust oj 1630 网线(MST)
- [Warning] deprecated conversion from string constant to 'char*' 原因
- PCA 数学原理 (讲的很到位啊)
- IntelliJ IDEA 开发 WebService
- abstract与interface区别