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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
js的对象与函数详解
Jan 21 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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
仓库组长岗位职责
2014/01/29 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
同意离婚答辩状
2015/05/22 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技