问题描述
- 这个动不起来，看看有什么问题
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html""; charset=""gb2312" /> <title>无标题文档</title> <style type="text/css"> div{ width: 553px; height: 343px; border:1px solid #000; perspective: 500px; } div img{ /*all 旋转过渡时间 ease 旋转前等待时间*/ transition:all 1s ease 0s; } div img cur{ /*all 旋转过渡时间 ease 旋转前等待时间*/ transform:rotateY（30deg）translateZ(300px); } input{ /*防止按钮被挡住，所以要有z-index值，记住只有定位的元素才有z-index值*/ position: relative; z-index: 1000; } </style> <script type="text/javascript"> window.onload = function(){ //得到按钮 var btn = document.getElementById("btn"); //得到图片 var img = document.getElementsByTagName("img")[0]; //监听 btn.onclick = function(){ img.className = "cur"; //设置img的class属性 } } </script> </head> <body> <input type="button" value="按我" id="btn" /> <div> <img src="images/1.jpg" alt="" class="cur"/> </div> </body> </html>
解决方案
css中的括号改英文状态的，而且样式都搞错了。。是div img.cur，你那样写是cur元素了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" "; charset=" "gb2312" />
<title>无标题文档</title>
<style type="text/css">
div {
width: 553px;
height: 343px;
border: 1px solid #000;
perspective: 500px;
}
div img {
/*all 旋转过渡时间 ease 旋转前等待时间*/
transition: all 1s ease 0s;
}
div img.cur {
/*all 旋转过渡时间 ease 旋转前等待时间*/
transform: rotateY(30deg);
}
input {
/*防止按钮被挡住，所以要有z-index值，记住只有定位的元素才有z-index值*/
position: relative;
z-index: 1000;
}
</style>
<script type="text/javascript">
window.onload = function () {
//得到按钮
var btn = document.getElementById("btn");
//得到图片
var img = document.getElementsByTagName("img")[0];
//监听
btn.onclick = function () {
img.className = img.className == 'cur' ? '' : 'cur';
//设置img的class属性
}
}
</script>
</head>
<body>
<input type="button" value="按我" id="btn" />
<div>
<img src="音图50.jpg" alt="音图50.jpg" />
</div>
</body>
</html>
时间： 2024-09-02 11:31:55