本文实例讲述了射流研究…实现的点击按钮图片上下滚动效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { margin : 0；划水：0;列表样式：无；} .大{宽度： 200像素高度： 200像素；余量：100像素自动{宽度： 100像素高度： 100像素；border: 1px纯黑；相对位置：飞越：隐藏；} li { width: 100px高度： 100像素；线高： 100像素；文本对齐：中心；} .color1 { background: red绝对位置：} .color2{ background:黄色；绝对位置：} .color3 { background: pink绝对位置：} .color4{ background:绿色；绝对位置：} . input 1 { width : 30pxh three : 30pxmargin 3360 10px绝对位置：top:150pxleft:550px}，输入2 { width : 30pxh three : 30pxm argin 3360 10px。绝对位置：top :150 pxleft 3360590 px }/style/head dydiv class=' big ' ul Li class=' color 1 ' style=' top :0；'1/Li Li class=' color 2 ' style=' top :100 px；'2/Li Li class=' color 3 ' style=' top :200 px；'3/Li Li class=' color 4 ' style=' top :-100px；'4/Li/ul input class=' input 1 ' type=' button ' value=' 1 ' input class=' input 2 ' type=' button ' value=' 2 '/div脚本窗口。onload=function(){ var oipt 1=document。getelementsbytagname(' input ')[0]；var oipt 2=文档。getelementsbytagname(' input ')[1]；var all color=文档。getelementsbytagname(' Li ')；oIpt2.addEventListener('click ')，function(){ for(var I=0；长度；全彩。风格。top=parseFloat(所有颜色[I]。风格。top)-100 ' px '；全彩[我]。风格。过渡=1 ' s ' if(全彩[I]。风格。top===-300 ' px '){全彩[I]。风格。top=100 ' px '所有颜色[I]。风格。transition=0的' } }，false)oipt 1。addeventlistener(' click ')，function(){ for(var I=0；长度；全彩。风格。top=parseFloat(所有颜色[I]。风格。top)100‘px’；全彩[我]。风格。过渡=1 ' s ' if(全彩[I]。风格。top==400 ' px '){全彩[I]。风格。top=0 ' px '所有颜色[I]。风格。transition=0 ' } } }，false) }/script/body/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行结果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。