jquery仿魔客吧遮罩展示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery仿魔客吧遮罩展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jquery仿魔客吧遮罩展示特效</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<style type="text/css">
ul,li{margin:0;padding:0}
li{list-style:none;}
.mkb{height:200px;}
.mkb ul{margin:0 auto;width:1120px;height:200px;}
.mkb ul li{float:left;width:260px; height:200px;margin:0 10px;}
	.mb_tx{width:260px;height:200px; background:;overflow:hidden; position:relative; cursor:pointer;}	
	.tx_hui{width:2px;height:2px; background:#666; display:none;margin: auto; position:absolute; left:0;right:0;bottom:0;top:0;}
	.tx_tp{display:none; width:130px;height:130px; position:absolute; left:0;right:0;bottom:0;top:0;margin: auto;opacity:0.1;}
</style>
</head>

<body>
<div class="mkb">
	<ul>
    	<li>
            <div class="mb_tx">
                <img src="images/1.jpg" width="260" height="200" alt="WIAR创意摄影网站模板" />
                <div class="tx_hui"></div>
                <div class="tx_tp"><img src="images/moke8.png" width="100%" height="100%"></div>
            </div>
        </li>
        <li>    
            <div class="mb_tx">
                <img src="images/2.jpg" width="260" height="200" alt="WIAR创意摄影网站模板" />
                <div class="tx_hui"></div>
                <div class="tx_tp"><img src="images/moke8.png" width="100%" height="100%"></div>
            </div>
        </li>
        <li>    
            <div class="mb_tx">
                <img src="images/3.jpg" width="260" height="200" alt="WIAR创意摄影网站模板" />
                <div class="tx_hui"></div>
                <div class="tx_tp"><img src="images/moke8.png" width="100%" height="100%"></div>
            </div>
        </li>    
        <li>    
            <div class="mb_tx">
                <img src="images/4.jpg" width="260" height="200" alt="WIAR创意摄影网站模板" />
                <div class="tx_hui"></div>
                <div class="tx_tp"><img src="images/moke8.png" width="100%" height="100%"></div>
            </div>
        </li>        
    </ul>
</div>  
<script type="text/javascript">

$( document).ready(function(){
		$(".mb_tx").mouseenter(function(){
			$(this).find(".tx_hui").stop().fadeIn('100').css("display","block").animate({
				opacity:'0.6',
     			height:'200px',
      			width:'260px'
				},100)
		    $(this).find(".tx_tp").stop().fadeIn('300').animate({
				opacity:'1.0',
				height:'34px',
				width:'40px'
				},300);
			})
	   $(".mb_tx").mouseleave(function(){
			$(".tx_hui").stop().fadeIn('10').animate({
     			 height:'2px',
      			width:'2px'
				})
		     $(".tx_tp").stop().animate({
			   	opacity:'0.1',
				height:'130px',
				width:'130px'
				}).fadeOut('50') ;
			})
 		});  
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)