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" 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的层选择器：

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

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

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

赞 (0)

相关推荐

  • jquery+CSS3实现3D拖拽相册效果

    jquery+CSS3实现3D拖拽相册效果

    很久之前练习过的一个实践,复习完渐变.圆角.3D变形.拖拽等等来看源码,估计还不会太凌乱(◎﹏◎)哈哈哈 效果图: HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head> <meta charset="UTF-8"> <title>3D拖拽相册

  • 非常漂亮的相册集 使用jquery制作相册集

    非常漂亮的相册集 使用jquery制作相册集

    一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片.预览如下: 该页面的代码十分简单,我们以此为例逐步实现图像的翻滚: img-rollover.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • jQuery实现带滚动导航效果的全屏滚动相册实例

    jQuery实现带滚动导航效果的全屏滚动相册实例

    本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

  • jquery实现相册一下滑动两次的方法

    本文实例讲述了jquery实现相册一下滑动两次的方法.分享给大家供大家参考.具体实现方法如下: var t1=null; //定义为全局变量 $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; if (t1 == null){ t1 = new Date().getTime(); }els

  • 收集的10个免费的jQuery相册

    收集的10个免费的jQuery相册

    这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http

  • 基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    项目结构: 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop database if exists db_ajax; create database db_

  • Html5+jQuery+CSS制作相册小记录

    Html5+jQuery+CSS制作相册小记录

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离 话不多说,先上效果图: 代码如下: <!DOCTYPE html> <html> <head> <title>The second html page</title> <style ty

  • jquery+html仿翻页相册功能

    jquery+html仿翻页相册功能

    今天心情大好,再发一篇最进前端实现的相册模仿功能. 这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来, 写这个玩意前,我在网上找了一些案例,但是一看代码都比较傻眼,固不想去研究,所以自己写了..... 下面是实现这个功能的截图 如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一些问题.下面我会将我遇到的这些问题的解决方法分享出来. 首先说下:postion这个属性 以

  • jQuery插件实现大图全屏图片相册

    大图全屏图片相册jQuery插件,支持左右按钮切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件支持参数自定义功能,viewMode:0没有缩略图 1有缩略图  2缩略图.全屏幕.可以对图片进行左右转,具体的参数大家可以查看jQuery.album.js文件,总之效果很不错,喜欢的朋友可学习下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

    Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

    先给大家展示效果图: 点击查看效果图           源码下载 jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer. 文件引用: <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript" src

随机推荐