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

其实主要是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" οnclick="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" οnclick="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" οnclick="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的层选择器：

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

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

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

jQuery实现网易相册鼠标移动显示隐藏效果相关推荐

js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
jQuery 仿淘宝鼠标悬停显示大图效果
页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果. <script type="text/javascript& ...
js实现网页左侧导航条,鼠标经过显示隐藏的面板
js实现网页左侧导航条,鼠标经过显示隐藏的面板 <style>* {margin: 0;padding: 0;}#left_nav {position: relative;border: ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
javascript实现鼠标经过显示隐藏内容
html代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
鼠标经过显示隐藏盒子
一.需求实现: 在父盒子中有一个子盒子,默认是不显示出来,当鼠标经过的时候显示出来 (1)使用的是显示隐藏的写法: //HTML <div className="father" ...
HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层
$(document).ready(function(){ $("#div1").hide(); //先将层隐藏起来 var canHide = false; //标记是否可隐 ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
css加号图标_DIV，CSS如何实现“加减号”“显示隐藏”效果
展开全部 (1)1.js方法,这是一般网站常用的方法. 优点:兼容性好,易管理. 实现方式:按钮32313133353236313431303231363533e58685e5aeb931333337 ...

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

jQuery实现网易相册鼠标移动显示隐藏效果相关推荐

最新文章

热门文章