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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JS中substring与substr的用法
Nov 16 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
浅谈Vue.js
2017/03/02 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Node 模块原理与用法详解
2020/05/13 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python中关于for循环的碎碎念
2017/06/30 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
校园广播稿精选
2014/10/01 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
会计实训总结范文
2015/08/03 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android