思洋互动网站建设学前班

利用jQuery控制图片列表

利用jQuery控制图片列表的原理是：为每张图片设定一个相同大小的显示区域，并把这些显示区域通过列表的形式规则摆放。其中使用到了jQuery的ready()、each()函数和JavaScript对象属性style。

1．JavaScript对象属性：style--CSS属性

该属性获取或者设置匹配的标签的CSS属性。其语法形式如下：

1. object.style 

注：可以通过style引用CSS各种子属性。

2．功能实现

实现图片列表的步骤如下。

（1）设定图片在列表中排列的格式。

（2）通过jQuery选择器及函数获取每一个图片元素对象。

（3）为每一个图片元素对象设定一定尺寸。

首先，加入CSS样式定义：

1. 1<style type="text/CSS"> 
2. 2  .imglist{float:left;width:400px;list-style:none} //每行排列四个图片列表项  
3. 3  .imglist li{float:left;width:90px;margin:3px;text-align:center}        
4.                                         //设定每个列表项的宽度、边距，内容居中  
5. 4  .imglist li .area{height:60px;width:80px;display:block;}   
6.                                         //设定图片所在区域的大小并显示  
7. 5</style> 

 

然后，把jQuery库引入进来：

1. <script src="jslib/jquery-1.6.js" type="text/JavaScript"></script> 

 

并对原来的列表的代码部分进行修改：

1. 1 <ul class="imglist"> 
2. 2  <li><span class="area"><img src="img/img1.jpg"/></span></li> 
3. 3  <li><span class="area"><img src="img/img2.gif" /></span></li> 
4. 4  <li><span class="area"><img src="img/img3.jpg"/></span></li> 
5. 5  <li><span class="area"><img src="img/img4.gif" /></span></li> 
6. 6  <li><span class="area"><img src="img/img5.jpg" /></span></li> 
7. 7  <li><span class="area"><img src="img/img6.jpg"/></span></li> 
8. 8  <li><span class="area"><img src="img/img7.gif" /></span></li> 
9. 9  <li><span class="area"><img src="img/img8.gif"/></span></li> 
10. 10</ul> 

 

最后，添加完整代码如下：

1. 1 <script language="JavaScript"> 
2. 2 $(document).ready(function(){  
3. 3  $(".imglist").find("img").each(  
4. 4  function(){  
5. 5   var imgwidth=80;                        //图片显示标准宽度  
6. 6   var imgheight=60;                       //图片显示标准高度  
7. 7   var percent=0;//缩放比例  
8. 8   var image=new Image();                  //创建临时图片对象  
9. 9   image.src=this.src;                     //保存当前遍历到的图片对象  
10.    
11. 10    if(image.width>0 && image.height>0){  //获取加载完成的图片实际大小  
12.      //计算图片需要缩放的比例  
13. 11  percent = (imgwidth/image.width < imgheight/image.height)?imgwidth/     
14.     image.width:imgheight/image.height;  
15. 12   if(percent <= 1){                      //如果图片太大，则按照一定比例缩小图片  
16. 13     this.style.width = image.width*percent;  
17. 14     this.style.height =image.height*percent;  
18. 15    }  
19. 16     else {                               //否则，保持图片原大小  
20. 17            this.style.width = image.width;  
21. 18            this.style.height =image.height;  
22. 19        }  
23. 20    }   
24. 21  }  
25. 22  );  
26. 23 });  
27. 24 </script> 

 

图4.7是最后显示的效果。如前面的操作步骤所述，把列表项的排列形式设成了左对齐，并设定了列表的整体宽度为400px。取得每个列表项中的图片并根据图片的大小缩小到合适的范围。其中，标记就是图片显示的容器。

图4.7  控制图片列表