【jQuery】前端项目实践案例2——使用jquery制作新闻滚动效果！

1、实现效果：

 

2、实现思路：

（1）div+css布局，制作新闻列表。

（2）新闻默认滚动，即在ready事件里，直接执行函数

（3）滚动事件的执行：循环执行使用setInterval方法，新闻列表往上滚动，使用animate方法自定义动画。

（4）鼠标移上去，滚动停止，鼠标离开，滚动继续。

 

3、需要掌握的知识点：

（1）基本html知识、基础div+css布局

（2）正确引用jquery文件

（3）jquery选择器的使用：元素选择器、:animated选择器的使用

（4）自定义动画方法animate的使用

（5）定时函数setInterval的使用、鼠标mouseover和mouseout的使用、

（6）jquery连缀写法风格

 

 

4、实现步骤：

第一步：制作网页内容（新闻列表）

	
		

			
最新新闻
			

				
武汉军运会启动实体票销售、取票服务、邮寄服务工作 
				
武汉军运会启动实体票销售、取票服务、0000000000
				
武汉军运会启动实体票销售、取票服务、1111111111
				
武汉军运会启动实体票销售、取票服务、2222222222
				
武汉军运会启动实体票销售、取票服务、3333333333
				
武汉军运会启动实体票销售、取票服务、4444444444
				
武汉军运会启动实体票销售、取票服务、5555555555
				
武汉军运会启动实体票销售、取票服务、6666666666
				
武汉军运会启动实体票销售、取票服务、7777777777
				
武汉军运会启动实体票销售、取票服务、8888888888
				
武汉军运会启动实体票销售、取票服务、9999999999
			
		
	

 

第二步：添加css样式

 

第三步：引入jQuery文件

 

第四步：写jquery代码

 

本案例完整代码：

	
		
		
		
 		
		
	
	
		

			
最新新闻
			

				
武汉军运会启动实体票销售、取票服务、邮寄服务工作 
				
武汉军运会启动实体票销售、取票服务、0000000000
				
武汉军运会启动实体票销售、取票服务、1111111111
				
武汉军运会启动实体票销售、取票服务、2222222222
				
武汉军运会启动实体票销售、取票服务、3333333333
				
武汉军运会启动实体票销售、取票服务、4444444444
				
武汉军运会启动实体票销售、取票服务、5555555555
				
武汉军运会启动实体票销售、取票服务、6666666666
				
武汉军运会启动实体票销售、取票服务、7777777777
				
武汉军运会启动实体票销售、取票服务、8888888888
				
武汉军运会启动实体票销售、取票服务、9999999999
			
		
	

 

 

 

 

========这里是结束分割线=============