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


Posted in Javascript onMarch 31, 2013

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

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

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

直接上代码:

<!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了,方法全忘记啦,复习一下吧。

Javascript 相关文章推荐
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
js get和post请求实现代码解析
Feb 06 Javascript
Vue——前端生成二维码的示例
Dec 19 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
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php实现倒计时效果
2015/12/19 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
javascript常用函数(1)
2015/11/04 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
javascript history对象详解
2017/02/09 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
通过实例了解js函数中参数的传递
2019/06/15 Javascript
python  创建一个保留重复值的列表的补码
2018/10/15 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
举例讲解Python常用模块
2019/03/08 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
工程造价专业大专生求职信
2013/10/06 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
详解Python描述符的工作原理
2021/06/11 Python
Nginx的基本概念和原理
2022/03/21 Servers