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 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
document.forms用法示例介绍
Jun 26 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
js的event详解。
2006/09/06 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript工具库代码
2012/03/29 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python 内置函数filter
2017/06/01 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python绘图模块之利用turtle画图
2021/02/12 Python
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
人事档案接收函
2014/01/12 职场文书
施工材料员岗位职责
2014/02/12 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js