编程 Javascript

jQuery 网易相册鼠标移动显示隐藏效果实现代码

Posted in Javascript onMarch 31, 2013

其实主要是jquery 层选择器的应用，jquery 高手可以跳过。。。

网易相册效果图如下：当鼠标移动经过照片就显示“设为封面｜删除”，移开后就隐藏，此效果在web开发中经常会用到。故总结一下

直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
.al_info{display: none;} 
#imgdiv {float: left;width: 170px;height: 130px; display: block; padding:15px 10px;} 
#imgdiv img{width:160px;height:140px;} 
</style> 
<script type="text/javascript" src="../js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery("#imgvv div").hover(function() { 
jQuery(this).find("#oper").show().find("a").attr("href","javascript:void(0)"); 
}, function() { 
jQuery(this).find("#oper").hide(); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="imgvv"> 
<div id="imgdiv"> 
<span class="albumsDiv" onclick="showphoto(61)"><img 
title="myhome photo" alt="myHOME" 
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG"> 
</span><br> 
<span title="myHOME" class="name">myHOME</span> <span class="al_info">共2张照片 
</span> <br> 
<span class="al_info" id="oper"><a href="#">编辑属性</a>|<a 
href="#">删除</a> 
</span> 
</div> 
<div id="imgdiv"> 
<span class="albumsDiv" onclick="showphoto(61)"><img 
title="myhome photo" alt="myHOME" 
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG"> 
</span><br> 
<span title="myHOME" class="name">myHOME</span> <span class="al_info">共2张照片 
</span> <br> 
<span class="al_info" id="oper"><a href="#">编辑属性</a>|<a 
href="#">删除</a> 
</span> 
</div> 
<div id="imgdiv"> 
<span class="albumsDiv" onclick="showphoto(61)"><img 
title="myhome photo" alt="myHOME" 
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG"> 
</span><br> 
<span title="myHOME" class="name">myHOME</span> <span class="al_info">共2张照片 
</span> <br> 
<span class="al_info" id="oper"><a href="#">编辑属性</a>|<a 
href="#">删除</a> 
</span> 
</div> 
</div> 
</body> 
</html>

运行结果：

jQuery 网易相册鼠标移动显示隐藏效果实现代码

事实上主要是jquery的层选择器：

$("div span")//选择<div>里所有<span>元素
$("div>span")//选择<div>元素下元素名为<span>的元素（仅一个）
$('prev+next')//选择紧接在prev元素后的next元素（所有匹配的对象）
$('prev~siblings')//选择prev元素之后的所有sibling元素

这里用到是选择元素内的元素“find()”方法。

一年多没有用JQeruy了，方法全忘记啦，复习一下吧。

jQuery 网易相册鼠标移动显示隐藏效果实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 同时在IE和FireFox获取KeyCode的代码

Feb 07 Javascript

鼠标右击事件代码(asp.net后台)

Jan 27 Javascript

如何学习Javascript入门指导

Nov 01 Javascript

javascript中拼接HTML字符串的最快、最好的方法

Jun 07 Javascript

js锁屏解屏通过对$.ajax进行封装实现

Jul 31 Javascript

Node.js中安全调用系统命令的方法（避免注入安全漏洞）

Dec 05 Javascript

jQuery下拉友情链接美化效果代码分享

Aug 26 Javascript

jQuery电话号码验证实例

Jan 05 Javascript

angularjs实现table增加tr的方法

Feb 27 Javascript

JavaScript实现简单的计算器

Jan 16 Javascript

解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

Jul 27 Javascript

Vue实现购物小球抛物线的方法实例

Nov 22 Vue.js

jQuery实现页面滚动时层智能浮动定位实例探讨

Mar 29 #Javascript

表单验证的完整应用案例探讨

Mar 29 #Javascript

JavaScript 处理Iframe自适应高度(同或不同域名下)

Mar 29 #Javascript

图片img的src不变让浏览器重新加载实现方法

Mar 29 #Javascript

javascript打印大全(打印页面设置/打印预览代码)

Mar 29 #Javascript

js 利用image对象实现图片的预加载提高访问速度

Mar 29 #Javascript

jquery无缝向上滚动实现代码

Mar 29 #Javascript