vfdsvdf 2015-10-15 06:32 采纳率: 12.5%
浏览 1420
已采纳

这个动不起来，看看有什么问题

 <!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>
  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2015-10-15 07:00
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！