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


Posted in Javascript onJuly 21, 2016

这一段时间在学习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实现鼠标经过购物车出现下拉框 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 #Javascript
如何用JS判断两个数字的大小
Jul 21 #Javascript
AngularJs基本特性解析(一)
Jul 21 #Javascript
jQuery表单验证插件解析(推荐)
Jul 21 #Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 #Javascript
完美JQuery图片切换效果的简单实现
Jul 21 #Javascript
jQuery的ajax下载blob文件
Jul 21 #Javascript
You might like
SSI指令
2006/11/25 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python实现共轭梯度法
2019/07/03 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python笔记之观察者模式
2019/11/20 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python定义函数实现累计求和操作
2020/05/03 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python 爬虫请求模块requests详解
2020/12/04 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
C语言面试题
2013/05/19 面试题
给导游的表扬信
2014/01/10 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
2016高考寄语集锦
2015/12/04 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js