网站中图片上滑出现说明文字的特效

最新推荐文章于 2022-12-13 14:30:05 发布

BigLazyET

最新推荐文章于 2022-12-13 14:30:05 发布

阅读量2.1k

点赞数

文章标签： js jquery 网站中图片上滑出现说明文字的特效

本文链接：https://blog.csdn.net/u010792238/article/details/25300435

版权

网页前台特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网站中为了美观也为了可以在一个区域中展示的信息更多的原因，可以看到很多图文混杂的特效。

(这个的目标是单位面积上呈现给用户的信息量最多)

比如鼠标放到图片上，然后图片翻转到背面，而背面是图片的介绍信息

比如鼠标放到图片上，然后从图片的下端或者任一端弹出对应介绍信息的图层，图片位置不变

比如鼠标放到图片上，然后图片上移紧随着的是介绍信息的显示

这篇博客是讲的以上说到的第三种比如。

图片特效展示如下：

起先：鼠标放上去：最后是：

原理：

这里a标签就包括图片和文字，其实图片和文字是一个整体，可以理解让a显示在一个固定宽高的容器中，从这个容器中看只能看到190*114这么大的区域。

通俗点讲就是拿一个木框装裱一幅画，把木框放在画上，你只能看到木框大小的画的那块区域，你上下移动画，木框位置不变，在木框中呈现的画的区域就不一样了吧。这个特效就类似于这个意思。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动导航</title>
<style type="text/css">
*{ padding:0px; margin:0px;}
img{ border:none;}
ul,li{ list-style:none;}
/*overflow规定为hidden让下面的toll_info暂时看不到，只有鼠标放上去后，a整体上移才能让toll_info显示出来*/
.box li{ width:190px; height:114px; margin-right:10px; float:left; overflow:hidden; position:relative;}
.toll_img{ width:190px; height:114px;}
.toll_info{ height:114px; background:#EEE; vertical-align:middle;display:table-cell;}
.box li .toll_info p{ padding:10px; width:190px; font:normal 13px/24px '微软雅黑'; cursor:pointer;}
.box li a{ color:#666; text-decoration:none; position:absolute; top:0; left:0;}
</style>
<script src="Js/jquery1.9.1.js" type="application/javascript"></script>
<script type="application/javascript">
$(document).ready(function(){
	$('.box a').mouseover(function(){
		/*这里让a整体上移，这样文字内容toll_info才能显示出来。*/
		$(this).stop().animate({"top":"-114px"}, 300); 
	})
	$('.box a').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 300); 
	})
})
</script>
</head>
<body>
<div style="width:600px; height:200px; margin:50px auto;">
<!--代码开始-->
<ul class="box">
	<li>
		<a href="#">
			<div class="toll_img"><img src="images/2.jpg" /></div>
			<div class="toll_info"><p>汤姆克鲁斯 - 碟中谍</p></div>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="toll_img"><img src="images/3.jpg" /></div>
			<div class="toll_info"><p>汤姆克鲁斯 - 少数派报告</p></div>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="toll_img"><img src="images/4.jpg" /></div>
			<div class="toll_info"><p>汤姆克鲁斯 - 甜心先生</p></div>
		</a>
	</li>
</ul>
<!--代码结束-->
</div>
</body>
</html>

BigLazyET

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网站中图片上滑出现说明文字的特效

网站中为了美观也为了可以在一个区域中展示的信息更多的原因，可以看到很多图文混杂的特效。(这个的目标是单位面积上呈现给用户的信息量最多)比如鼠标放到图片上，然后图片翻转到背面，而背面是图片的介绍信息比如鼠标放到图片上，然后从图片的下端或者任一端弹出对应介绍信息的图层，图片位置不变比如鼠标放到图片上，然后图片上移紧随着的是介绍信息的显示这篇博客是讲的以上说到的第三种比如。
复制链接

扫一扫