首页 > web前端 > js教程 > jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery

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

WBOY
发布: 2016-05-16 17:38:53
原创
1284 人浏览过

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

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

直接上代码:

复制代码 代码如下:





Insert title here







jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery 共2张照片


编辑属性|href="#">删除



jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery 共2张照片


编辑属性|href="#">删除



jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery 共2张照片


编辑属性|href="#">删除






运行结果:

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

$("div span")//选择

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

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

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板