jquery练习——简单的图片结果展示效果

今天看到google图片搜索结果页面，感觉简洁实用，于是用jquery粗略的模仿了一下

再次感觉到jquery的强大和易用，基本思路初步实现了，再整合ajax和json，应该可以做一个简单的应用了 :)

<html>
<head>
<title>jquery练习——简单的图片结果展示效果--http://www.cnblogs.com/libsource/</title>
<style>
#cfoot ul,#cfoot li{
margin:0;padding:0;list-style-type:none;
}
#cdiv{
width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left;
}
#cfoot li{
display:inline-block;width:100px;height:100px;line-height:100px;float:left;text-align:center;border:1px solid #D5DDF9;margin-right:20px;cursor:pointer;
}
#cfoot li.cur{
border:1px solid #ffcc33;
}
#cleft,#cright{
float:left;text-align:center;width:50px;height:500px;display:inline-block;cursor:pointer;
}
#cright{
float:right;
}
.clearfloat{
clear: both;height: 0;font-size: 1px;line-height: 0px;
}
</style>
</head>
<body>
<div id="cdiv">
<div id="cright">>
</div>
<div id="cleft"><
</div>
<div id="cmain">
图片1
</div>
</div>
<br class="clearfloat"/>
<div id="cfoot">
<ul>
<li class="cur" pv="图片1">缩略1</li>
<li pv="图片2">缩略2</li>
<li pv="图片3">缩略3</li>
<li pv="图片4">缩略4</li>
<li pv="图片5">缩略5</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">

function setContent(){
    var curobj=$("#cfoot li[pv]:first");
    if(curobj.length>0)
        $("#cmain").html(curobj.addClass("cur").attr('pv'));
};
function move(position){
    position=position||"prev";
    eval('var curobj=$("#cfoot li.cur[pv]");if(curobj.'+position+'("#cfoot li").length>0){$("#cmain").html(curobj.removeClass("cur").'+position+'("#cfoot li").addClass("cur").attr("pv"));}');
}
$(function(){
    $(document).keydown(function (e) {
      switch(e.which){
        case 37:
        move('prev');
        break;
        case 39:
        move('next');
        break;
        default:
        break;
      }
    });
    $("#cleft").click(function(){move('prev');});
    $("#cright").click(function(){move('next');});
    $("#cfoot li").click(function(){
        $("#cfoot li.cur").removeClass("cur");
        $("#cmain").html($(this).addClass("cur").attr('pv'));
    });
});
</script>
</body>
</html>

posted @ 2009-12-15 18:10 lib 阅读(314) 评论(0) 收藏举报

刷新页面返回顶部

简单生活

jquery练习——简单的图片结果展示效果

公告