基于Javascript的网页特效技术研究

李林 王扬扬 李涛

【摘 要】本文研究用JavaScript语言实现网页特效，对轮播图、选项卡、模态窗口等动态效果的代码写法、特点进行了详细讨论。运用合适的网页特效能提高视觉效果，更好的实现用户与页面的交互。

【关键词】网页特效，HTML，JavaScript

1.引言

随着互联网的发展，网页的表现方式从最早的静态网页发展到现在的绚丽多彩、充满互动性的网页，人们越来越追求视觉上的享受。单纯的HTML语言呈现出的网页效果太单一，因此各种网页特效处理技术，作为HTML语言的补充应运而生。JS是目前运用最广泛的网页特效处理技术。

2.轮播图

轮播图是展现图片的一种动态效果，在门户类、交易类、娱乐类网站中经常都能使用到。本实例是带缩略图的轮播图，要表现出的效果是大图部分每隔3秒会自动切换到下一副图片，同时缩略图与大图对应切换。当鼠标移到大图上时，图片停止切换，鼠標移走切换开始。左右有两个箭头可控制上一副与下一副的切换。点击缩略图，大图切换到对应缩略图。

2.1 第一种实现方式

HTML中使用列表标签

这种方式是通过改变需轮播的图片左边距离父盒子最左边的距离的值来实现图片滚动效果，以每幅需轮播的图宽作为一个单位，需要注意的是JS中不会自动获取图片的宽度与图片的数量，每次使用时需要手动更改这两个元素的值。……