基于Javascript的网页特效技术研究
2016-07-05李林王扬扬李涛
李林 王扬扬 李涛
【摘 要】本文研究用JavaScript语言实现网页特效，对轮播图、选项卡、模态窗口等动态效果的代码写法、特点进行了详细讨论。运用合适的网页特效能提高视觉效果，更好的实现用户与页面的交互。
【关键词】网页特效，HTML，JavaScript
1.引言
随着互联网的发展，网页的表现方式从最早的静态网页发展到现在的绚丽多彩、充满互动性的网页，人们越来越追求视觉上的享受。单纯的HTML语言呈现出的网页效果太单一，因此各种网页特效处理技术，作为HTML语言的补充应运而生。JS是目前运用最广泛的网页特效处理技术。
2.轮播图
轮播图是展现图片的一种动态效果，在门户类、交易类、娱乐类网站中经常都能使用到。本实例是带缩略图的轮播图，要表现出的效果是大图部分每隔3秒会自动切换到下一副图片，同时缩略图与大图对应切换。当鼠标移到大图上时，图片停止切换，鼠標移走切换开始。左右有两个箭头可控制上一副与下一副的切换。点击缩略图，大图切换到对应缩略图。
2.1 第一种实现方式
HTML中使用列表标签
这种方式是通过改变需轮播的图片左边距离父盒子最左边的距离的值来实现图片滚动效果，以每幅需轮播的图宽作为一个单位，需要注意的是JS中不会自动获取图片的宽度与图片的数量，每次使用时需要手动更改这两个元素的值。
2.2 第二种实现方式
HTML和CSS设置方式同第一种实现方式一致。这种方式同样也是通过改变改变需轮播的图片左边距离父盒子最左边的距离的值来实现图片滚动效果，但JQ代码中因自动获取了大图的宽度witch与图片数量，因此在使用时可不更改JQ，只用设置好HTML与CSS然后导入JS代码就行了。
2.3 两种方式的比较
第二种JS特效写法明显优于第一种写法，代码使用起来简单方便。但是由于第二种写法中用了许多JS的方法，若要增减一些功能改动性较大，对JQ语言熟悉度要高。而第一种写法基本上是用算法的方式，每次使用只需改变2个值，增减功能时更易于操作。
3.选项卡
选项卡效果多用于门户类、交易类、论坛类等具有大量数据的网站，它可以为一个网页节省空间以存放大量信息。本实例要表现出的效果是点击左侧按钮对应右侧内容会切换。点击右侧上方按钮，右侧下方内容会切换。
HTML中设置好了两个按钮后，在一块空白位置放置选项卡内容部分，无论有几个选项卡内容都放在这个位置，它们叠加在一起。注意设置这块内容部分的CSS样式为绝对定位position：absolute；相对定位posi：reletive；设置给存放选项卡的父盒子。给需要隐藏的内容设置CSS样式display：none。
这种效果的左侧控制是通过按钮的点击事件控制右侧的CSS属性display：block或display：none；来实现右侧两个盒子的出现与隐藏。而右侧上方有5个按钮，本实例是通过.siblings（）来控制其他未被点击到的按钮的行为，使代码更简洁。
选项卡效果用于页面同一位置需要显示多种分类别的内容，使要展现出的内容在很小的一块位置充分展现，动态效果不跳跃很连贯。
4.下拉单
选项卡与下拉单一样是为了节约空间为目的的，多用于门户类、交易类、论坛类等具有大量数据的网站。本实例要表现出的效果是点击标题栏，内容部分出现，再次点击，内容部分隐藏。
HTML中使用列表标签
