每天一個jquery插件-做圖片書簽
做圖片書簽
新年快樂，馬上準備看春晚了，所以今天的筆記有點水，就是圖片的書簽效果，一個約定的效果
效果如下
代碼部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做圖片書簽</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#div{
border: 1px solid lightgray;
width: 95%;
height: 400px;
margin: 20px auto;
}
.sqimg{
width: 100%;
height: 100%;
z-index: 2;
}
.sqdiv{
overflow: hidden;
position: relative;
}
.sqtxt{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
z-index: 3;
top:100%;
color: white;
text-indent: 24px;
}
</style>
</head>
<body>
<div id="div" class="sqdiv">
<img src="img/1.png" class="sqimg"/>
<div class="sqtxt">這是一段介紹</div>
</div>
</body>
</html>
<script>
$(function(){
$(".sqdiv").mouseenter(function(){
var that = $(this);
that.children(".sqtxt").stop().animate({
"top":"0px"
},500)
})
$(".sqdiv").mouseleave(function(){
var that = $(this);
that.children(".sqtxt").stop().animate({
"top":"100%"
},500)
})
})
</script>
新年快樂！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259253.html
標籤：其他
上一篇：2021年春節點擊螢屏放煙花
下一篇：Vue框架——屬性系結和樣式系結