最新消息:

第62款插件:jquery.imgTxtCut.js制作图片与文字切换特效

图片幻灯插件 杨红伟 1513浏览 0评论

描述:有时候我们想让鼠标移到图片上显示全部的整张图上面的文字效果,这款插件可以圆我们一个梦想,很干净,很实用!
图片:

11

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:暂无JS下载:http://www.ijquery.cn/js/jquery.imgTxtCut.js
预览:http://www.ijquery.cn/demo/imgTxtCut
打包下载:http://www.ijquery.cn/demo/imgTxtCut/imgTxtCut.zip
参数说明:

effects:”fade”,   //fade淡出淡出,scroll为鼠标移入向上\鼠标移出向下,flaser压扁。默认为flaser
speed:300,       //fade或者scroll的时间

JS引用代码:

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.imgTxtCut.js"></script>
<script type="text/javascript">
$(function () {
$("#img-txt-box").imgTxtCut({
effects:"fade",
speed : 300
});
});
</script>

[/js]

HTML代码:
注意:不同的效果要按照下面的CSS的class的特效来走!!勿忘!!

[html]

<div id="img-txt-box">
<ul>
<li>
<div>
<a href="#" target="_blank"><img height="188" width="250" alt="" src="http://www.ijquery.cn/ijqueryimages/01.jpg" /></a>
</div>
<div>
<h3><a href="#">第62款插件:jquery.imgTxtCut.js制作图片与文字切换特效</a></h3>
<p><a href="#">描述:有时候我们想让鼠标移到图片上显示全部的整张图上面的文字效果,这款插件可以圆我们一个梦想,很干净,很实用!</a></p>
</div>
</li>
<li>
<div>
<a href="#" target="_blank"><img height="188" width="250" alt="" src="http://www.ijquery.cn/ijqueryimages/02.jpg" /></a>
</div>
<div>
<h3><a href="#">第62款插件:jquery.imgTxtCut.js制作图片与文字切换特效</a></h3>
<p><a href="#">描述:有时候我们想让鼠标移到图片上显示全部的整张图上面的文字效果,这款插件可以圆我们一个梦想,很干净,很实用!</a></p>
</div>
</li>
</ul>
</div>

[/html]

CSS代码:

[css]

.clearfix:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {zoom:1;}
/* ———————- demo style start  ———————- */
/* img-txt-flaser */
.img-txt-flaser li{width:250px;height:188px;border:1px solid #E9CDF3;overflow:hidden;float:left;margin:10px 10px 0 0;display:inline;position:relative}
.img-txt-flaser li h3{font-size:12px;line-height:18px;padding:0 6px}
.img-txt-flaser li p{padding:0 6px;color:#999999;font-size:12px;}
.img-txt-flaser li h3 a:link,.img-txt-flaser li h3 a:visited{color:#F50C43;text-decoration:none}
.img-txt-flaser li h3 a:hover{color:#F50C43;text-decoration:none}
.img-txt-flaser li p a:link,.img-txt-flaser li p a:visited{color:#999999;text-decoration:none}
.img-txt-flaser li p a:hover{color:#999999;text-decoration:none}
/* img-txt-scrool */
.img-txt-scrool li{width:250px;height:188px;border:1px solid #E9CDF3;overflow:hidden;float:left;margin:10px 10px 0 0;display:inline;position:relative}
.img-txt-scrool li .scrool-box{position:absolute;}
.img-txt-scrool li h3{font-size:12px;line-height:18px;padding:0 6px}
.img-txt-scrool li p{padding:0 6px;color:#999999;font-size:12px;}
.img-txt-scrool li h3 a:link,.img-txt-scrool li h3 a:visited{color:#F50C43;text-decoration:none}
.img-txt-scrool li h3 a:hover{color:#F50C43;text-decoration:none}
.img-txt-scrool li p a:link,.img-txt-scrool li p a:visited{color:#999999;text-decoration:none}
.img-txt-scrool li p a:hover{color:#999999;text-decoration:none}
/* img-txt-fade */
.img-txt-fade li{width:250px;height:188px;border:1px solid #E9CDF3;overflow:hidden;float:left;margin:10px 10px 0 0;display:inline;position:relative;background:#333333;}
.img-txt-fade li .imgBox{position:absolute;z-index:10}
.img-txt-fade li .txtBox{position:absolute;top:0;left:0;}
.img-txt-fade li h3{font-size:12px;line-height:18px;padding:0 6px}
.img-txt-fade li p{padding:0 6px;color:#999999;font-size:12px;}
.img-txt-fade li h3 a:link,.img-txt-fade li h3 a:visited{color:#F50C43;text-decoration:none}
.img-txt-fade li h3 a:hover{color:#F50C43;text-decoration:none}
.img-txt-fade li p a:link,.img-txt-fade li p a:visited{color:#999999;text-decoration:none}
.img-txt-fade li p a:hover{color:#999999;text-decoration:none}

[/css]

 

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址