首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
图片特效
> 正文
慢慢变大的图片
2011-06-11 图片特效 313℃
脚本说明: 第一步：把如下代码加入<body>区域中 <script LANGUAGE="JavaScript"> <!-- Begin var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy; function zoomImg(imgname, total, steps, maxx, maxy) { // convert the total from seconds to miliseconds total = total * 1000; objref = eval("document.getElementById('"+imgname+"')"); currentx = objref.width; currenty = objref.height; // work out how much we need to increase the image by each step // devide image sizes by number of steps to get the amount we need to change each step stepx = maxx / steps; stepy = maxy / steps; // devide the total time (in ms) by the number of steps to get the interval time inttime = total / steps; // set the interval to increase the size of the image by the required pixels functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")"; ival = setInterval(functionRef, inttime); } function resizeImg(imgname, dx, dy, maxx, maxy) { objref = eval("document.getElementById('"+imgname+"')"); currentx = objref.width; currenty = objref.height; if ((currentx<maxx-dx) && (currenty<maxy-dy)) { objref.height = currenty + dy; objref.width = currentx + dx; } else { clearInterval(ival); objref.height = maxy; objref.width = maxx; } } // End --> </script> <div align="center"><img src="/images/tx/1.jpg" name="test" id="test"></div> 第二步：把<body>中的内容改为： <body onLoad="zoomImg('test', 10, 150, 300, 200)">
相关特效代码
点击图片图片大小发生变化
06/11
点击小图显示大图片
06/11
按钮控制缩放图片
05/31
单击图片逐渐放大特效
05/31
图片上下左右拉伸效果特效
05/30
按钮控制图片放大缩小特效
05/30
鼠标经过图片变大
05/30
仿google首页下端图片文字动画导航
05/16
CCS+DIV搭建的一座立体房屋图片
03/31
点击按钮展示图片或者关闭显示图片
03/31
热门特效代码
js图片自动切换代码
CSS实现区域内等比例放大缩小图片
JS图片切换效果
飘动图片广告代码
鼠标经过图片变大
简单高效的javascript 幻灯片播放
JavaScript封装的平滑图片滚动，
点击图片出现大图
图片局部放大效果特效
图片上下左右拉伸效果特效
推荐特效代码
点击按钮淡入淡出弹出图文信息
探照灯效果图片特效代码
简单高效的javascript 幻灯片播放
飘动图片广告代码
JavaScript封装的平滑图片滚动，
超酷超绚精美图片展示效果代码
