jQuery实现鼠标经过购物车出现下拉框代码(推荐)

这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题:

  购物车html:

<!-- 购物车 start -->
<div class="shopping" id="shopping-box">
<a href="" id="shoptext"><i class="iconfont"></i> 购物车(0)</a>
<!-- 购物车下拉框 start-->
<div class="shop" id="shop-content">
购物车中还没有商品,赶紧选购吧!
</div>
<!-- 购物车下拉框 end-->
</div>
<!-- 购物车 end -->

  刚开始学习原生js时候的写法:

//购物车下拉框 start
var shoppingBoxNode = document.getElementById("shopping-box");
var shopContentNode = document.getElementById("shop-content");
var shoptext = document.getElementById("shoptext");
shoppingBoxNode.onmouseenter = function(){
shoptext.style.background = "#fff";
shoptext.style.color = "#ff6700";
shopContentNode.style.display = "block";
console.log("over");
};
shoppingBoxNode.onmouseleave = function(){
shoptext.style.background = "";
shoptext.style.color = "";
shopContentNode.style.display = "";
console.log("out");
};
//购物车下拉框 end

  感觉很麻烦,而且还不好理解,下面用jQuery来写的:

//购物车 下拉
var interval1;
$("#shopping-box").mouseenter(function(){
clearTimeout(interval1);
$(this).children().first().css({"color":"#ff6700","background":"#fff"});
$(this).children().last().stop(true,true).slideDown();
}).mouseleave(function(){
var self = $(this);
interval1 = setTimeout(function(){
self.children().first().removeAttr("style");
},700);
$(this).children().last().delay(200).slideUp();
});

  这个看着就干净利落的多,相对的减少了代码量,这里面事件使用应用链的写法,而且jQuery的方法的兼容问题基本上在其内被都已经被解决了,这点真是让前端的工作量减少了很多,用原生的时候调兼容调的头都快炸了(大家都懂的。。。),里面用到了jQuery中的延时delay和停止动画stop来处理(很好用的两个函数),当鼠标移动过快出现的问题

  这里面事件的写法当然也可以用下面的方法(on也可以用bind来替换):

//购物车 下拉
var interval1;
$("#shopping-box").on({
mouseenter:function(){
},
mouseleave:function(){
}
});

以上所述是小编给大家介绍的jQuery实现鼠标经过购物车出现下拉框 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • jquery实现鼠标悬浮停止轮播特效

    本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3

  • jQuery实现鼠标经过时出现隐藏层文字链接的方法

    本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • JQuery获取鼠标进入和离开容器的方向

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标从哪个方向进入和离开容器</title> <script src="js/jquery-3.

  • jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

    本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jquery实现图片列表鼠标移入微动

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

  • 使用jQuery或者原生js实现鼠标滚动加载页面新数据

    相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t

随机推荐