利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

今天给大家介绍一下怎样利用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

自然框架,拆分后的项目关系

  拆分了一下自然框架,似乎又绕回去了。以前是多个项目分开放的,有人说太分散了,还得一个个下载,麻烦。于是就做了一个解决方案,把项目都放在了一起。   现在呢,...

2055
来自专栏OpenApplus

小程序应用中WebView中原生组件限制问题解析

在微信的文档中有一个章节说明了『 [原生组件的使用限制](https://developers.weixin.qq.com/miniprogram/dev/co...

920
来自专栏Java帮帮-微信公众号-技术文章全总结

POI导入导出【面试+工作】

POI导入导出【面试+工作】 1.场景一 近期项目中的excel导入导出功能需求频繁的出现,趁此机会,今天笔者对POI的Excel数据的导入导出做一...

3234
来自专栏非著名程序员

有关使用Universal-Image-Loader的遇到的问题和使用小技巧

? 今天我们来分析一下使用Universal-Image-Loader异步加载图片时遇到的一些问题和解决办法。今天咱们的公众号不分享高大上的原理分析和源码分析...

1848
来自专栏菩提树下的杨过

silverlight之deeplink学习笔记

所谓的deeplink技术是为了解决silverlight(或flash)之类的RIA Web应用无法被搜索引擎收录而出现的,属于SEO范畴。 就拿最常见的企业...

1795
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

491
来自专栏AndroidTv

前端入门1-基础概念声明正文

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

532
来自专栏文武兼修ing——机器学习与IC设计

HTML入门手记(1)HTML概述HTML基本语法

HTML概述 学习原因:希望制作一云项目控制工具,HTML用于提供GUI并消除不同客户端差异 学习目标:会使用HTML语言,Jinja模板和Bootstrap框...

3314
来自专栏静默虚空的博客

jQuery 简介和安装

什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery库包含以下功能: HTML 元素选取 HTML 元素...

2015
来自专栏腾讯大讲堂的专栏

移动H5前端性能优化指南

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒...

4426

扫码关注云+社区