随笔小特效代码01

最新推荐文章于 2023-03-10 23:24:55 发布

viser123

最新推荐文章于 2023-03-10 23:24:55 发布

阅读量212

点赞数

分类专栏： js 前端网页优化文章标签： js web前端 jquery

本文链接：https://blog.csdn.net/viser123/article/details/50886184

版权

js 前端网页优化专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>砸金蛋</title>
<script src="jquery-1.11.3.js"></script>
<style>
* {
margin:0;
padding:0;
list-style: none;
}

.bg {
width: 998px;
min-height:500px;
margin:10% auto;
}

p {
color:#fce671;
font-weight: bold;
margin-left: 50px;
}

ul li {
float: left;
margin:70px 30px;
}

ul li a {
display: none;
}

ul li span {
display: none;
}

.zhuizi {
position: absolute;
left:140px;
top:140px;
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<div class="bg">
<p>砸金蛋效果</p>
<div>
<img src="img-6.png" class="zhuizi" alt="图片无法显示">
<ul>
<li>
<img src="egg_1.png" alt="图片无法显示">
<a href="javascript:void(0)">
<img src="egg_2.png" alt="图片无法显示">
</a>
<span>
<img src="img-4.png" alt="图片无法显示">
</span>

</li>
<li>
<img src="egg_1.png" alt="图片无法显示">
<a href="javascript:void(0)">
<img src="egg_2.png" alt="图片无法显示">
</a>
<span>
<img src="img-4.png" alt="图片无法显示">
</span>

</li>
<li>
<img src="egg_1.png" alt="图片无法显示">
<a href="javascript:void(0)">
<img src="egg_2.png" alt="图片无法显示">
</a>
<span>
<img src="img-4.png" alt="图片无法显示">
</span>
</li>
<li>
<img src="egg_1.png" alt="图片无法显示">
<a href="javascript:void(0)">
<img src="egg_2.png" alt="图片无法显示">
</a>
<span>
<img src="img-4.png" alt="图片无法显示">
</span>
</li>
</ul>
</div>
</div>
<script>
// 显示锥子
$("ul>li").hover(function(){
var p = ($(this).position().left+$(this).width())+"px";
$(".zhuizi").show().css("left",p);
},function(){
$(".zhuizi").hide();
}) ;
// 砸蛋效果
$("ul>li").click(function(){
var left11 = ($(this).position().left)+"px";
$(this).children("img").hide("2000");
$(this).children("a").show();
$(this).children("span").show("8000").css({
"position":"absolute",
"z-index":"10",
"left":left11,
"top":"180px"
})
})
</script>
</body>
</html>