admin 管理员组

文章数量: 887031


2023年12月17日发(作者：python 复杂正则表达式)

实验四 jQuery动画效果

【实验目的】

1、掌握jQuery处理动画效果的方法；

2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；

3、掌握jQuery自定义动画的定义。

【实验准备】

1、复习教材相关内容；

2、预习本次实验；

【实验内容】

1、实现折叠菜单的效果，效果如图4-1所示。

图4-1

无标题文档

服务管理

等待提交

等待发布

更新流程

后台搜索

更新流程

下载管理

下载

2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。其效果如图4-2所示。

图4-2

无标题文档

3、实现一组图片的水平滚动，当鼠标悬停时图片停止滚动。效果如图4-3所示。

图4-3

无标题文档

4、实现图片的广告页效果，当点击相应的图片索引时，切换显示相应图片。其效果如图4-4所示。

图4-4

无标题文档

  • 1

  • 2

  • 3

  • 4

  • 5

【总结与体会】

通过本次学习，我学习到：如果在在显示过程中添加动画效果，可以使用show方法。如果要在隐藏元素的过程中添加动画效果并在动画完成后执行某种操作，则通过hide方法来实现。使用fadeIn方法实现淡入效果。当隐藏元素时，可以使用fadeout方法来实现淡出效果。对于处于隐藏状态的元素，使用slideDown方法可以将其显示出来，并且添加向下滑动的动画效果。对于页面中的可见元素，可以使用slideup方法将匹配的元素隐藏起来并在隐藏过程中添加向上滑动效果。最后，animate()方法用于改变匹配元素的一组CSS属性，并生成自定义动画效果。


本文标签： 效果 动画 图片 方法 元素

版权声明：本文标题：实验四 jQuery动画效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1702794836h431198.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。