Home思洋影视事业部网站建设知识库
0 Comments

利用jQuery与CSS控制列表项符号图片

发布于：2012-11-14  |   作者：广州网站建设  |   已聚集：人围观
利用jQuery与CSS控制列表项符号图片

利用jQuery与CSS控制列表项符号图片的原理是：利用jQuery为每个列表项动态加载CSS样式背景图片，并隐藏原有的列表项标号。其中，用到了jQuery的addClass()函数。

1．jQuery的addClass()函数--添加样式类选择

该函数为每个匹配的元素添加指定的类名。其语法形式如下：



    
	
  1. 
		addClass(class|fn) 
    2. 




	注：参数中class表示一个或多个要添加的类名，类名间可用空格分隔。fn的使用形式为function(index, class)，此函数必须返回一个或多个空格分隔的class名。fn接收两个参数，index参数为对象在这个集合中的索引值；class参数为这个对象原先的class属性值。



	2．功能实现



	控制列表项的图片符号步骤如下。



	（1）添加含有指定背景图片的CSS样式类。



	（2）利用jQuery的ready()函数来实现在页面整体加载完成后执行特效效果。



	（3）在function()内部使用each()函数遍历列表项。



	（4）为每一个列表项添加CSS样式类。



	首先，加入CSS样式类定义：




    
	
  1. 
		1<style type="text/CSS"> 
    2. 
	
  2. 
		2   #ulstyle {list-style:none;}         //设定列表样式，取消原有的列表项符号  
    3. 
	
  3. 
		3   .list {background:url(img/listico.jpg) no-repeat;padding-left:20px}                                         //设定背景图片样式  
    4. 
	
  4. 
		4</style> 
    5. 




	 

然后，把jQuery库引入进来：



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




	 

最后，添加JavaScript代码，利用jQuery的选择器找出每个列表项，并将CSS类添加到列表项上。完整代码如下：



    
	
  1. 
		1<script language="JavaScript"> 
    2. 
	
  2. 
		2   $(document).ready(function(){  
    3. 
	
  3. 
		3       $("#ulstyle li").each(function(){       //使用each()遍历每一个li  
    4. 
	
  4. 
		4           $(this).addClass("list");           //为li添加样式类  
    5. 
	
  5. 
		5       });  
    6. 
	
  6. 
		6   });  
    7. 
	
  7. 
		7</script> 
    8. 




	 

图4.6是最后显示的效果。但是，这里要注意的是一定不能让背景图片重复显示。因为如果背景图片重复摆放，会造成文字部分模糊不清，失去了期望的效果。


	
		

			
				
		

		

			
				图4.6  控制列表项图片符号
		

	



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机