jquery广告牌翻转效果代码

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

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

以下是 jquery广告牌翻转效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery广告牌翻转效果</title>
<style type="text/css">
		body {
			background:#f6f9e7;
			font: 0.8em "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica;
			color: #444d27;
		}
		p, h1, h2, h3, h4 {
			margin-bottom:1em;
			font-weight:normal;
		}
		h2 {
			font:1.8em Georgia, "Times New Roman", Times, serif;
			text-align:center;
		}
		h3 {
			font:1.5em Georgia, "Times New Roman", Times, serif;
		}
		a, img {
			border:none;
		}
		a {
			color:#d46e00;
			text-decoration:none;
		}
		.center {text-align:center;}
		#wrap {
			width:800px;
			margin:20px auto;
		}
		
		/* ---- styling the list ---- */
		
		#work {
			float:left;
			list-style:none;
			margin:0;
			padding:0;
		}
		#work li {
			float:left;
			display:block;
			width:235px;
			margin:10px;
			display:inline;
			padding:3px; 
			background:#fff;
			border:1px solid #cad789; 
			height:154px;
		}
		#work li a {
			border:none;
		}
		#work p {
			margin-bottom:0;
		}
		
		
		/* ---- show-hide elements ---- */
		
		#work li .show{
			display:block;
			width:235px;
			height:154px;
		}
		#work li .hide {
			color:#d4df9d;
			text-align: left;
			height: 0;
			overflow: hidden;
			background:#687b00;
		}
		#work li:hover .hide, #work li.over .hide {
			cursor: pointer;
			height: 133px;
			padding:10px;
			width:215px;
		}
		#work li:hover .show, #work li.over .show {
			height: 0;
			overflow: hidden;
		}
		
		#work li a {
			color:#e9ff73;
			font-size:1.3em;
		}
		#work li a:hover {
			color:#fff;
		}
</style>

<!-- add hover class to #work li if the mouse over -->
<!--[if lte IE 7]>


<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">$(function() {
		$('#work li').mouseover
			(function(){
			$(this).addClass('over');
		});
		$('#work li').mouseout
			(function(){
			$(this).removeClass('over');
		});

});
</script>
<![endif]-->
</head>

<body>
<div id="wrap">
<h2>CSS Hover Effect</h2>
<h4 class="center">With JQuery-based hover fix for IE6</h4><br />
<ul id="work">
    <li>
    	<a class="show" href="#"  title="SDDirect Website Development"><img src="images/sdd.jpg" alt="Social Developement Direct" /></a>
      <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
    <li><a  class="show" href="#" title="Whitehorse Website Design" ><img src="images/whitehorse.jpg" alt="White Horse" /></a>
      <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and develop XHTML/CSS for The White Horse Inn</p></div>
     </li>
    <li><div class="show"><a href="#" title="Lensview Gallery Design" class="thumb"><img src="images/lenseview.jpg" alt="White Horse"  /></a></div>
 <div class="hide"><a href="#">Lensview Gallery Design</a><p>Photo gallery design and integration for Bach Tran</p></div>
    </li>
    <li>
    	<a class="show" href="#"  title="SDDirect Website Development"><img src="images/ard.jpg" alt="Social Developement Direct" /></a>
      <div class="hide"><a href="#">SDDirect Website Development</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
    <li><a class="show" href="#" title="Whitehorse Website Design"><img src="images/mpi.jpg" alt="White Horse" /></a>
      <div class="hide"><a href="#">Whitehorse Website Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
     </li>
    <li><a class="show" href="#" title="Lensview Gallery Design"><img src="images/herbal.jpg" alt="White Horse"  /></a>

     <div class="hide"><a href="#">Lensview Gallery Design</a><p>Design and devevelopment the website and custom CMS for SDDirect</p></div>
    </li>
  </ul>
  </div>
</body>
</html>

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