我想学习滑块控制div

找不着完整的代码，自己写了点，实现不了滑块使得DIV块平移的效果

<!DOCTYPE html>

<html>

<head>

#wrap{

-webkit-perspective:800px;/*表示3维物体距离浏览器窗口800像素处*/

-webkit-perspective-origin:50% 50%;/*表示位于浏览器正中心处观察3维物体*/

-webkit-transform-style:-webkit-perspective-3d;

}

#block{

width: 100px;

height: 100px;

margin: 0px auto;

background: yellow;

/*-webkit-transform:translateX(x 500px);/*沿X轴位移500PX*/

/*-webkit-transform:rotateX(45deg); /*绕X轴旋转45度*/

}

#op.range-control{

width: 721px;

}

</style>

function translate() {

var x=document.getElementById("translatex").value;

var y=document.getElementById("translatey").value;

var z=document.getElementById("translatez").value;

document.getElementById("block").style.webkitTransform="translateX("x"+px) translateY("y"+px) translateZ("z"+px)";

document.getElementById("translatex-span").innerText=x;

document.getElementById("translatey-span").innerText=y;

document.getElementById("translatez-span").innerText=z;

}

</script>

</head>

<body>

</div>

<p>translatex:<span id="translatex-span">0</span>px</p>

<p>translatey:<span id="translatey-span">0</span>px</p>

<p>translatez:<span id="translatez-span">0</span>px</p>

</div>

</body>

</html>

qq_风雨中坚强_0

浏览 1215回答 1

1回答

找谁

我把你的代码运行在页面上，发现了很多错误。因为我是JS初学者，所以不能帮助你什么，只能告诉你，onchange="translate()" 根本进不去function translate()，改变onchange方法，用onpropertychange、oninput 方法也是一样，oninput 报错：new_file1.html:61 Uncaught TypeError: translate is not a function。其它的没有反应。

随时随地看视频慕课网APP