jquery hover鼠标悬停产品图片文字信息滑动显示插件


jquery hover鼠标悬停产品图片文字信息滑动显示插件
jquery hover鼠标悬停产品图片文字信息滑动显示插件以及鼠标悬停、产品图片文字、信息滑动显示等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:794px;margin:40px auto;}
/* showbox */
.showbox{height:303px;width:375px;border:solid 1px #ddd;position:relative;overflow:hidden;float:left;margin:0 10px;display:inline;}
.showbox .subtitle{position:absolute;left:0;bottom:-48px;height:30px;line-height:30px;width:355px;background:#333;opacity:0.7;filter:alpha(opacity=70);color:#fff;font-size:12px;padding:5px 10px;}
</style>
<div class="demo">
	<div class="showbox">
		<a target="_blank" href="http://www.51qianduan.com/"><img width="375" height="303" alt="jquery hover图片特效,鼠标滑过图片animate动画放大显示" src="images/34sd.jpg" /></a>
		<div class="subtitle">jquery hover图片特效,鼠标滑过图片animate动画放大显示</div>
	</div>
	<div class="showbox">
		<a target="_blank" href="http://www.51qianduan.com/"><img width="375" height="303" alt="jquery Promptu-menu菜单滑动插件制作iphone或ipad主屏幕触摸效果" src="images/as2345.jpg" /></a>
		<div class="subtitle">jquery Promptu-menu菜单滑动插件制作iphone或ipad主屏幕触摸效果</div>
	</div>
</div><!--demo end-->
<script type="text/javascript">
$(".showbox").each(function(){
	var self = $(this), delay;
	self.mouseover(function(){
		delay = setTimeout(function(){ delay = null; self.find(".subtitle").stop().animate({"bottom":0}, 300);},300);
	}).mouseout(function(){
		if(delay){
			clearTimeout(delay);
		}else{
			setTimeout(function(){self.find(".subtitle").stop().animate({"bottom":-40}, 300);},300);
		}
	});
});
</script>

相关推荐

发表评论

相关文章