0

请帮忙。我有一个图片库，我想扩展每个缩略图以显示全长图像，然后单击它返回到其原始大小。请提供一些jquery代码的建议。谢谢你。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(e) {

$('#wrapper ul li').bind('click', function () {
    $(this).removeClass();
    $(this).fadeIn(500).addClass("applyclass");});

});
</script>
<style>
html, body{margin:0; padding:0; width:100%; height:100%}
#wrapper{background:#0CC; margin:0 auto 0 auto}
#wrapper ul{list-style:none; margin:0 auto 0 auto; padding:0; width:960px;}
#wrapper ul li{display:inline-block; width:227px; height:180px; background:#FC3; margin:5px;}
#wrapper ul li.applyclass{display:block; width:960px; height:300px}
#wrapper ul li.removeclass{display:inline-block; width:227px; height:180px}
</style>
</head>

<body>
<div id="wrapper">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</div>
</body>
</html>
4

1 回答 1

0

试试这个脚本，

$(document).ready(function() {

    $('#wrapper ul li').click(function () {
       if($(this).hasClass("applyclass"))
          $(this).removeClass("applyclass");   
       else
          $(this).fadeIn(500).addClass("applyclass");
    });

});

演示：http: //jsfiddle.net/8TchT/1/

更新 此代码将li通过单击其他li的来减小

$(document).ready(function() {

    $('#wrapper ul li').click(function () {
          $('#wrapper ul li').removeClass("applyclass");
          $(this).fadeIn(500).addClass("applyclass");


    });

});

演示：http: //jsfiddle.net/8TchT/3/

于 2013-02-21T15:10:05.540 回答