jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery
程序员文章站
2022-04-24 20:41:59
...
其实主要是jquery 层选择器的应用,jquery 高手可以跳过。。。
Insert title here
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
运行结果:
网易相册效果图如下:当鼠标移动经过照片就显示“设为封面|删除”,移开后就隐藏,此效果在web开发中经常会用到。故总结一下
直接上代码:
复制代码 代码如下:
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
title="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
myHOME 共2张照片
编辑属性|href="#">删除
运行结果:
事实上主要是jquery的层选择器:
$("div span")//选择
里所有元素
$("div>span")//选择
$("div>span")//选择
元素下元素名为的元素(仅一个)
$('prev+next')//选择紧接在prev元素后的next元素(所有匹配的对象)
$('prev~siblings')//选择prev元素之后的所有sibling元素
$('prev+next')//选择紧接在prev元素后的next元素(所有匹配的对象)
$('prev~siblings')//选择prev元素之后的所有sibling元素
这里用到是选择元素内的元素“find()”方法。
一年多没有用JQeruy了,方法全忘记啦,复习一下吧。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
推荐阅读
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论