利用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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang语言--db对象初始化

声明一个全局的db对象,并进行初始化。 var db *sql.DB func init() { db, _ = sql.Open("mysql", "ro...

3518
来自专栏iOSDevLog

Unity 3D 开发《王者荣耀》:英雄移动地图英雄

1553
来自专栏hightopo

原 荐 基于 HTML5 Canvas 的交

1404
来自专栏Google Dart

为Flutter应用程序添加交互性 顶

你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

962
来自专栏flutter开发者

[Flutter Widget]Chip

在前面的文章中我们看了下Tooltip的用法,在文章的最后也给大家留了一个问题,自定义自己的Tooltip。

612
来自专栏walterlv - 吕毅的博客

WPF 多线程 UI:设计一个异步加载 UI 的容器

2018-09-08 12:53

581
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Subservient Cat

课程内容 Ø Playing Video Ø MediaElement     Subservient Cat是一个“虚拟宠物”的应用程序。与大多数猫不一...

1749
来自专栏IMWeb前端团队

react 和 redux 入门

本文作者:IMWeb 王少飞 原文出处:IMWeb社区 未经同意,禁止转载 react的核心思想:组件封装。 页面的所有元素都是可以封装成组件 rea...

1798
来自专栏Linux驱动

21.Linux-写USB键盘驱动(详解)

本节目的:     根据上节写的USB鼠标驱动,来依葫芦画瓢写出键盘驱动 1.首先我们通过上节的代码中修改,来打印下键盘驱动的数据到底是怎样的 先来回忆下,我们...

1889
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

6849

扫码关注云+社区