jquery滑动图片说明特效代码

今天事不多,分享一款自己写的一个特效,代码简单,实现原理:作一个盒子(假设宽高为:200px X 138px,给这个盒子一个定位属性:position:relative),盒子里面就放一张宽高一样的图片,然后盒子里面再装一个盒子(跟图片是同一级别的,这个盒子里就可以放文字等内容了),把这个盒子的宽高跟外层的盒子设成一样,用定位属性:position:absolute;相对于外面这个盒子定位,把top这个属性设为外面盒子的高度,如138px ,这下样式就做好了,接下来用jquery的animate这个属性,用法是这样的:$(‘#div’).animate({‘top':’0px’},’fast’);   花括号里面是放css样式,外面是时间(参数有:fast、slow、数值[如:1000]);下面是代码和效果图:

jquery滑动文字特效

jquery滑动文字特效

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jquery滑动图片说明特效代码</title>
 <script type="text/javascript" src="jquery.js"></script>
 <style>
 #divfont { width:200px; height:138px; margin:30px; border:solid 1px #ddd; overflow:hidden; position:relative; float:left;}
 #divfont .font { width:200px; height:138px; position:absolute; left:0; top:138px; background:#333; padding-top:15px; font-size:13px; color:#fff; line-height:22px; opacity:0.8}
 #divfont .font span {display:block; width:188px; height:auto; margin:0 auto;}
 </style>
 <script>
 $(document).ready(function() {
 var _this;
 $('body #divfont').hover(function() {
 _this=$(this);
 speed=setTimeout(function() {
 _this.find('.font').animate({'top':'0px'},'fast');
 },200);
 },function() {
 clearTimeout(speed);
 $(this).find('.font').animate({'top':'138px'},'fast');
 });
 });
 </script>
 </head>
 <body>
 <div id="divfont">
 <img src="ly.jpg" border="0" />
 <div><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span></div>
 </div>
 <div id="divfont">
 <img src="ly.jpg" border="0" />
 <div><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span></div>
 </div>
 <div id="divfont">
 <img src="ly.jpg" border="0" />
 <div><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span></div>
 </div>
 <div id="divfont">
 <img src="ly.jpg" border="0" />
 <div><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span><span>我被移动出来啦,鼠标移开我就要走了,呜呜</span></div>
 </div>
 </body>
 </html>

代码下载地址:百度网盘

分享到:
标签:Jquery,滑动效果,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

报歉!评论已关闭.