最近项目中有个小需求,需要对一个div做上传图片的效果,当鼠标移入div时提示图片显示,当鼠标移除div时提示图片隐藏,我的实现方案如下:
<form> <div class="file-list"> <div class="list-img"> <div class="cover"></div> <img src="img/plus.png" /> <input type="file" class="file" id="file1"> <p>上传标题图片</p> </div> </div> </form> //鼠标进入事件 var enterFun=function(){ $(this).find('.cover').css('display', 'block'); $(this).find('img').css('display', 'block'); $(this).find('p').css('display', 'block'); $(this).find('input').css('display', 'block'); } //鼠标移除事件 var outFun=function(){ $(this).find('.cover').css('display', 'none'); $(this).find('img').css('display', 'none'); $(this).find('p').css('display', 'none'); $(this).find('input').css('display', 'none'); } //鼠标移入事件 $(".file-list").find(".list-img").each(function(i,el){ $(el).on("mouseenter",enterFun); }) //鼠标移出事件 $(".file-list").find(".list-img").each(function(i,el){ $(el).on("mouseleave",outFun); })
html中的<form>标签和<input type="file"/>是为了后面的上传图片,<div class="cover">标签是用来做背景蒙版的,<img src="img/plus.png" />是添加图片的标记图片。代码这样写,毫无疑问是可以完成任务的,但关键是重写了很多相同的代码,我希望能做一下简单的提炼,减少代码的重复,目前把js代码修改如下:
var mouseFun=function(event){ var display="none"; if (event.data.type=="enter") { display="block"; } $(this).find('.cover').css('display', display); $(this).find('img').css('display', display); $(this).find('p').css('display', display); $(this).find('input').css('display', display); } //绑定事件 $(".file-list").find(".list-img").each(function(i,el){ $(el).on("mouseenter",{type:"enter"},mouseFun);
$(el).on("mouseleave",{type:"leave"},mouseFun); })
在此过程中有几个知识点希望记录一下:
1.mouseover和mouseenter事件的区别:
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave
2.jquery中on函数绑定带参函数,参数作为对象绑定在event.data上,想获取参数,必须通过event.data来获取。