用jQuery写简单遮罩
来源:互联网 发布:pos机可以在淘宝卖吗 编辑:程序博客网 时间:2024/06/04 18:35
css代码
<style type="text/css">
body,div,img,p{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width:1200px;
margin:30px auto;
overflow: hidden;
}
.sbox{
width:30%;
margin:20px;
float: left;
position: relative;
}
.img{
width:100%;
}
.shade{
width:360px;
height: 260px;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,.5);
display: none;
}
</style>
html代码
<div class="box">
<div class="sbox"><p class="shade"></p><img src="img/1.jpg" alt="" /></div>
<div class="sbox"><p class="shade"></p><img src="img/2.jpg" alt="" /></div>
<div class="sbox"><p class="shade"></p><img src="img/3.jpg" alt="" /></div>
</div>
javascript代码
$(function(){
$(".sbox").mouseover(function(){
if($(this).children(".shade").is(":animated")){
return;
}else{
$(this).children(".shade").slideDown(1000);
}
}).mouseout(function(){
$(this).children(".shade").slideUp(1000);
});
})
</script>
- 用jQuery写简单遮罩
- jQuery写简单模态框
- jQuery写的简单投票
- 简单学写Jquery插件
- 简单jquery写css样式
- 用jquery写一个简单的广告动画效果
- 用jQuery写个简单的日历组件
- 用jQuery写的简单两级树形菜单
- 用JQuery写的一个简单的验证码功能
- 分别用原生JS与jQuery 写简单选项卡
- 学习JQUERY,写的简单下拉菜单!
- jQuery 写的简单打字游戏
- 如何写一个简单的jquery插件
- 如何写一个简单的jQuery插件
- 用Jquery 写一个简单的消息提醒(带声音提示)
- 用jquery写tab菜单
- 用JQuery来写Ajax
- 用jquery写的面板
- sftp服务器下载文件至本地电脑
- 【MySQL for Mac】终极解决——MySQL在Mac的字符集设置
- 向量范数求导
- kubernetes二进制部署时ca认证排错记录
- 【Java】14.ThreadPoolExecutor
- 用jQuery写简单遮罩
- 十年,最后一个alpha,0.4.1版的reactos终于变得可赏可玩了
- malloc、free用法
- 【Java高并发学习】锁优化相关建议
- Python (3)python中的数据类型转换,运算和运算符,数据类型检测方法
- ANSYS Workbench 输出APDL文件(Input File)到服务器上求解,PBS脚本
- week6 mini project "blackjack" 图片素材
- D
- 2.1单符号离散信源目录