网站中图片上滑出现说明文字的特效
网站中为了美观也为了可以在一个区域中展示的信息更多的原因,可以看到很多图文混杂的特效。
(这个的目标是单位面积上呈现给用户的信息量最多)
比如鼠标放到图片上,然后图片翻转到背面,而背面是图片的介绍信息
比如鼠标放到图片上,然后从图片的下端或者任一端弹出对应介绍信息的图层,图片位置不变
比如鼠标放到图片上,然后图片上移紧随着的是介绍信息的显示
这篇博客是讲的以上说到的第三种比如。
图片特效展示如下:
起先:鼠标放上去:最后是:
原理:
这里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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。