<>强效果图:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
#包装{
宽度:800 px;
身高:500 px;
边界:1 px固体一;
margin-left: 10 px;
margin-top: 5 px;
浮:左;
}
# input1 {
宽度:80 px;
保证金:5 px汽车5 px 10 px;
字体大小:0;
浮:左;
}
# div1 {
宽度:100 px;
身高:100 px;
背景:hotpink;
位置:绝对的;
上图:20 px;
左:30 px;
border - radius: 100 px;
不必:0 px 5 px 5 px rgba (0, 0, 0, 0。5);
}
输入{
宽度:100 px;
高度:40像素;
行高:40像素;
text-align:中心;
字体大小:18 px;
显示:块;
背景:苍绿色;
margin-bottom: 5 px;
}
& lt;/style>
& lt;/head>
& lt; body>
祝辞& lt; div id=" wrap ";
& lt; div id=" div1 "祝辞& lt;/div>
& lt;/div>
& lt; div id=癷nput1”比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/向左" id="这里"/比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/向右" id=" btn1 "/比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/向上" id=" btn3 "/比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/向下" id=" btn4 "/比;
& lt;/div>
& lt; script>
var oBtn=. getelementbyid (“btn1”);
var oDiv=. getelementbyid (“div1”);
var oBtn2=. getelementbyid(这里的);
var oBtn3=. getelementbyid (“btn3”);
var oBtn4=. getelementbyid (“btn4”);
oBtn4.onclick=function () {
移动(oDiv, 10380, ' 0 px 5 px 5 px rgba(0, 0, 0, 0。5) ', '高级');
}
oBtn3.onclick=function () {
移动(oDiv -10, 30 0 px 5 px 5 px rgba(0, 0, 0, 0。5) ', '高级');
}
oBtn2.onclick=function () {
移动(oDiv -10, 40 5 px 5 px 5 px rgba(0, 0, 0, 0。5)”,“左”);
}
oBtn.onclick=function () {
移动(oDiv, 10680, ' 5 px 5 px 5 px rgba(0, 0, 0, 0。5)”,“左”);
}
函数移动(obj, val,目标,bs, dir) {
obj.style.boxShadow=b;
clearInterval (obj.timer);
obj.timer=setInterval(函数(){
var速度=方法(getStyle (obj, dir)) + val;
如果(speed>=target&, val> 0) {
速度=目标;
}
如果(speed<=target&, val<0) {
速度=目标
}
obj.style [dir]=速度+“px”;
如果(速度==目标){
clearInterval (obj.timer);
}
},30);
}
函数getStyle (obj,猪圈){
返回obj.currentStyle& # 63; obj.currentStyle[猪圈]:getComputedStyle (obj)(妓院);
}
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
