教程集 > jQuery > jquery 教程 > 正文 jquery 简单的图片展示效果

jquery 简单的图片展示效果

发布时间：2013-09-03 编辑：jiaochengji.com

今天看到google图片搜索结果页面，感觉简洁实用，于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用，基本思路初步实现了，再整合ajax和json，应该可以做一个简单的应用了 :)

<html> 
<head> 
<title>jquery练习——简单的图片结果展示效果--cnblogs 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://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script type="text/javascript">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章：
jQuery图片幻灯手风琴效果插件 Slidorion
jQuery幻灯片插件 Skitter
jQuery图片预览插件 imgPreview
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 分享精心挑选的23款美轮美奂的jQuery 图片特效插件
 jQuery幻灯片插件 Slides
基于jquery的15款幻灯片插件
 jQuery图片效果切换 Adipoli

上一篇：jQuery Attributes(属性)的使用(二、类篇) 下一篇：JQuery读取XML文件数据并显示的实现代码

[关闭]

jquery 简单的图片展示效果

最近更新

浏览排行