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 相关文章推荐
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
JS函数式编程实现XDM一
Jun 16 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
php简单提示框alert封装函数
2010/08/08 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python pdb调试方法分享
2014/01/21 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python部署web开发程序的几种方法
2017/05/05 Python
用matplotlib画等高线图详解
2017/12/14 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
学生夜不归宿检讨书
2014/09/23 职场文书
中学生检讨书范文
2014/11/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
学校学期工作总结
2015/08/13 职场文书
公司岗位说明书
2015/10/08 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS