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 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue.js循环radio的实例
Nov 07 Javascript
详解vue 组件的实现原理
Nov 12 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
论坛头像随机变换代码
2006/10/09 PHP
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php 进度条实现代码
2009/03/10 PHP
Views rows style模板重写代码
2011/05/16 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
js里怎么取select标签里的值并修改
2012/12/10 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
小程序实现图片移动缩放效果
2020/05/26 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python getopt 参数处理小示例
2009/06/09 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
生日主持词
2014/03/20 职场文书
会计个人实习计划书
2014/08/15 职场文书
人力资源部工作计划
2019/05/14 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers