我想学习滑块控制div
找不着完整的代码，自己写了点，实现不了滑块使得DIV块平移的效果
<!DOCTYPE html>
<html>
<head>
<title>创建3D场景</title>
<style type="text/css">
#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>
<script type="text/javascript">
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 id="wrap">
<div id="block">
</div>
<div id="op">
<p>translatex:<span id="translatex-span">0</span>px</p>
<input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" onchange="translate()"/><br>
<p>translatey:<span id="translatey-span">0</span>px</p>
<input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" onchange="translate()"/><br>
<p>translatez:<span id="translatez-span">0</span>px</p>
<input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" onchange="translate()"/><br>
</div>
</div>
</body>
</html>
qq_风雨中坚强_01回答
-
找谁
我把你的代码运行在页面上 ，发现了很多错误。因为我是JS初学者，所以不能帮助你什么，只能告诉你，onchange="translate()" 根本进不去function translate()，改变onchange方法，用onpropertychange、oninput 方法也是一样，oninput 报错：new_file1.html:61 Uncaught TypeError: translate is not a function。其它的没有反应。
随时随地看视频慕课网APP
相关分类
CSS3