每天学一个jquery插件-做图片书签

每天一个jquery插件-做图片书签

做图片书签

新年快乐,马上准备看春晚了,所以今天的笔记有点水,就是图片的书签效果,一个约定的效果

效果如下
每天学一个jquery插件-做图片书签_第1张图片

代码部分


<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>

新年快乐!

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)