jQuery练手之滑动出现效果

最新推荐文章于 2020-11-09 20:59:59 发布

猫不在

最新推荐文章于 2020-11-09 20:59:59 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq_33574890/article/details/78283504

版权

效果概述：当鼠标移动到页面上时，出现文字说明和选择框，由于没有制作img图片，就暂时用span加背景颜色替代了。

难点：如果要展开的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*margin{
				padding: 0;
				margin: 0;
			}
			.image{
			
				display: inline-block;
				width: 280px;
				height: 180px;
				background: orange;
				opacity: 0.5;
			}
			#panel{
				border: 1px solid red;
				position: relative;
				font-size: 0;
				display: inline-block;
			}
			.bottomBar{
				font-size: 14px;
				position: absolute;
				width: 280px;
				height: 30px;
				background: rgba(0,0,0,0.3);
	            bottom:0 ;
	       display: none;
			}
			.bottomBar>span{
				display: inline-block;
				width: 130px;
				height: 100%;
				white-space: nowrap;
			    overflow: hidden;
				text-overflow: ellipsis;
				
			}
			.bottomBar a span{
				display: inline-block;
				width: 50px;
				height: 100%;
			}
		</style>
	</head>
	<body>
		
		<div id="panel">
			<div>
				<a href="http://imooc.com"><span class="image"></span></a>
			</div>
			<div class="bottomBar">
				<span>点击进入慕课网学习哟少年们！</span><a href="#" title="在网页上显示固定"><span style="background: red;"></span></a><a href="#" title="删除此标签"><span style="background: greenyellow;"></span></a><a href="#" title="编辑本标签"><span style="background: green;"></span></a>
			</div>
			
		</div>
	</body>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		(function(){
			
			var transp;
			$('#panel').hover(function(){
			transp=$('.image').css('opacity');//移入时候获得原始透明度
			$('.image').css('opacity','1');//改变透明度
			$('.bottomBar').slideDown();//向上显现
		},function(){
			$('.image').css('opacity',transp);
			$('.bottomBar').slideUp();
			
			
		})
		})()
		
	</script>
</html>

猫不在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery练手之滑动出现效果

效果概述：当鼠标移动到页面上时，出现文字说明和选择框，由于没有制作img图片，就暂时用span加背景颜色替代了。难点：如果要展开的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的。代码如下： *margin{ padding: 0;
复制链接

扫一扫