jQuery 超实用的图片列表布局切换效果

来源：互联网发布：国外数据分析网站编辑：程序博客网时间：2024/05/20 18:40

<!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>
<title>jQuery 超实用的图片列表布局切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body {
font-size: 12px;
}
p.switch {
width: 122px;
height: 26px;
margin-bottom: 15px;
background: url(/jscss/demoimg/201008/switch_bg.gif) no-repeat;
}
a.switch_thumb {
width: 34px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 0 0 0 80px;
display: block;
background: url(/jscss/demoimg/201008/switch_btn.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a.swap {
background-position: left bottom;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
ul.display {
width: 744px;
background: #222 none repeat scroll 0 0;
border-right: 1px solid #333;
border-top: 1px solid #333;
margin: 0;
padding: 0;
overflow: hidden;
clear: both;
}
ul.display li {
width: 742px;
float: left;
margin: 0;
padding: 10px 0;
border: 1px solid;
border-color: #111 #111 #333 #333;
}
ul.display li a {
color: #DDD;
text-decoration: none;
font-size: 140%;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h4 {
margin: 0;
padding: 5px;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 241px;
color: #CCC;
}
ul.display li .content_block a img{
border: 5px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}
ul.thumb_view li {
width: 246px;
}
ul.thumb_view li h4 {
display: inline;
}
ul.thumb_view li p {
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
</script>
</head>
<body>
<ul class="display">
<li>
<div class="content_block">
<a href="#"><img src="/jscss/demoimg/201008/sample1.gif" alt="Sample"></a>
<h4><a href="#">Sunflowa Media</a></h4>
<p>Hey, I'm Airos Chou.</p>
<p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="/jscss/demoimg/201008/sample2.gif" alt="Sample"></a>
<h4><a href="#">Sunflowa Media</a></h4>
<p>Hey, I'm Airos Chou.</p>
<p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="/jscss/demoimg/201008/sample3.gif" alt="Sample"></a>
<h4><a href="#">Sunflowa Media</a></h4>
<p>Hey, I'm Airos Chou.</p>
<p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
</div>
</li>
</ul>
</body>
</html>

0 0