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

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)