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 相关文章推荐
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
JS二维数组的定义说明
Mar 03 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
无线电的诞生过程
2021/03/01 无线电
php获取当月最后一天函数分享
2015/02/02 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
PHP实现简单日历类编写
2020/08/28 PHP
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
好的演讲稿开场白
2013/12/30 职场文书
新任教师自我鉴定
2014/02/24 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
爱晚亭导游词
2015/02/09 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
python flask框架快速入门
2021/05/14 Python