jquery网站右侧悬浮返回顶部带双二维码鼠标经过显示
JQuery是一种流行的JavaScript库，它可以帮助开发人员更轻松地操作HTML文档、处理事件、制作动画效果等。在网站开发中，JQuery也经常被用来实现各种实用的功能，比如网站右侧悬浮返回顶部带双二维码鼠标经过显示。
悬浮返回顶部
在网页中，有时候我们需要让用户方便地回到页面顶部。一个常见的做法就是在页面右下角添加一个返回顶部的按钮。通过JQuery，我们可以轻松地实现这个功能。首先，我们需要在HTML代码中添加一个返回顶部的按钮，并设置其样式和位置：
<div id="back-to-top"> <img src="back-to-top.png" alt="返回顶部"> </div>
然后，在JavaScript代码中，我们可以使用以下代码实现按钮的悬浮效果和点击事件：
$(function() { $(window).scroll(function() { if ($(this).scrollTop() > 200) { $(#back-to-top).fadeIn(); } else { $(#back-to-top).fadeOut(); } }); $(#back-to-top).click(function() { $(body,html).animate({ scrollTop: 0 }, 500); return false; }); });
代码中，我们使用了scroll事件来监听页面滚动，当滚动距离超过200像素时，显示返回顶部按钮；当滚动距离小于200像素时，隐藏返回顶部按钮。同时，我们给按钮添加了一个点击事件，当用户点击按钮时，页面会平滑地滚动到顶部。
双二维码鼠标经过显示
在网页中，我们有时需要展示一些二维码，比如微信公众号二维码、支付宝二维码等。通过JQuery，我们可以实现鼠标经过时显示二维码的效果。首先，我们需要在HTML代码中添加两个二维码图片，并设置其样式和位置：
<div id="qrcode-container"> <img src="wechat-qrcode.png" alt="微信二维码" id="wechat-qrcode"> <img src="alipay-qrcode.png" alt="支付宝二维码" id="alipay-qrcode"> </div>
然后，在JavaScript代码中，我们可以使用以下代码实现二维码的悬浮效果：
$(function() { $(#wechat-qrcode).hover(function() { $(#alipay-qrcode).fadeOut(); $(#wechat-qrcode).stop().animate({ right: 60px }, 300); }, function() { $(#wechat-qrcode).stop().animate({ right: 0px }, 300); }); $(#alipay-qrcode).hover(function() { $(#wechat-qrcode).fadeOut(); $(#alipay-qrcode).stop().animate({ right: 60px }, 300); }, function() { $(#alipay-qrcode).stop().animate({ right: 0px }, 300); }); });
代码中，我们使用了hover事件来监听鼠标悬浮和移开事件。当鼠标悬浮到微信二维码上时，支付宝二维码会隐藏，微信二维码会向右移动60像素；当鼠标移开时，微信二维码会向左移动60像素。同理，当鼠标悬浮到支付宝二维码上时，微信二维码会隐藏，支付宝二维码会向右移动60像素；当鼠标移开时，支付宝二维码会向左移动60像素。
通过以上代码，我们可以实现
相关文章
发表评论