动感！图片随鼠标伸缩自如
技术与开发
我近日访问17173.com，发现当鼠标移动到顶部的广告时，会显示完整的广告图片，鼠标移开后图片又收缩回去。这种效果很少见，我想知道这种效果是如何设计出来的，应用到自己的网站难度大吗？
要应用这种效果一点都不难，我们可以用JavaScript很简单地设计出图片伸缩效果。先在JavaScript中新建一个Div层，层中包含图片地址、链接、宽度和高度等信息接口，然后加上展开、收缩效果的代码，最后再设置图片默认显示大小以及展开大小即可。这样当鼠标移上去后，图片就会伸展，鼠标移开时，图片就会收缩。这种效果不仅可以用来制作图片展示，还可以用来制作FLASH动画展示。
设计图片伸缩功能
图片伸缩功能，可以全部用代码来实现。打开现有页面，在＜/head＞上方输入相关代码，其中关键代码如下（完整代码下载地址：http://www.cpcw.com/bzsoft）：
var GGsliceContent=function(config){this.config=config;this.startPlay=false;this.init()};
GGsliceContent.prototype={init:function(){document.write('＜div id="'+this.config.id+'" style="margin:auto;overflow:hidden;width:'+this.config.source.width+'px;"＞＜/div＞'）; /* 初始化函数，新建一个层*/
document.getElementById(this.config.id).innerHTML='＜a href="'+this.config.url+'" target="_blank"＞＜img src="'+this.config.source.src+'" border="0" width="'+this.config.source.width+'" height="'+this.config.source.height+'" /＞＜/a＞'/* 设置广告形式为图片，设置图片源及宽、高度*/
var me=this}，execute:function(){
var me=this;
document.getElementById(me.config.id).style.height=this.config.min; /* 设置图片初始化高度为最小值*/
document.getElementById(me.config.id).onmouseover=function(){clearTimeout(me.setTime);me.sliceDown(me.curHeight())};/* 当鼠标在图片上时执行sliceDown函数*/
document.getElementById(me.config.id).onmouseout=function(){clearTimeout(me.setTime);me.sliceUp(me.curHeight())}/* 当鼠标离开时，执行sliceUp函数*/
},sliceUp:function(i){ /*展开函数，参数为i */
var me=this;
if(i>this.config.min){ /* 当i大于最小值，展开*/
i=i-6; /*数字 6可以修改，数字越大，展开收缩越快*/
document.getElementById(this.config.id).style.height=i+"px";/* 设置图层高度*/
this.setTime=setTimeout(function(){me.sliceUp(i)},15)} /* 设置函数循环间隔时间，15可修改，越小效果越平滑*/
else{}},sliceDown:function(i){
var me=this;document.getElementById(this.config.id).style.display="";
if(i＜this.config.max){ /* 当i小于最大值，收缩*/
i=i+6; /*数字 6可以修改，数字越大，展开收缩越快*/
document.getElementById(this.config.id).style.height=i+"px";/* 设置图层高度*/
this.setTime=setTimeout(function(){me.sliceDown(i)},15)} /* 设置函数循环间隔时间，15可修改，越小效果越平滑*/
else{}},curHeight:function(){return parseInt(document.getElementById(this.config.id).style.height)}}
小知识：编写JavaScript脚本代码时，可使用逗号将多个语句连在一起，浏览器载入该代码时，将它作为一个完整的语句来调用，但语句的返回值是最右边的语句。
设置图片信息
动感的图片伸缩效果有了，接下来我们还必须在需要调用的地方添加详细的图片信息，要设置图片链接、最小高度、最大高度、源地址等，代码如下所示：
＜SCRIPT＞
var GGSCI_config = {
id:"sliceContent", /*切片图层ID，可自行修改 */
url:"#", /* 图层链接，可自行修改*/
min:30, /* 图层最小高度，可按实际需求修改*/
max:60, /*图层最大高度，可按实际需求修改 */
time:10, /* 图层展示或收缩时间，越小越快*/
source:{
src:"#", /* 图片地址，自行修改*/
width:960, /* 图片宽度，请按实际图片大小输入，否则图片会变形*/
height:60/* 图片高度，请按实际图片大小输入，否则图片会变形*/
}
};
var GGSCI_1 = new GGsliceContent(GGSCI_config); /* 新建一个ggsci_1实例，名称可自行修改*/
GGSCI_1.execute();/* 执行ggsci_1实例*/
＜/SCRIPT＞
总结
这种动感的图片伸缩效果，减少了页面占据的空间。当用户感兴趣时，将鼠标移上去，再显示更详细的信息，使得网站更加人性化。此外，我们还可以利用这种方法制作SWF广告，可以得到更诱惑的展示效果。