模拟旋转

最新推荐文章于 2024-07-25 10:52:47 发布

最新推荐文章于 2024-07-25 10:52:47 发布 · 174 阅读

文章标签：

#XHTML #HTML

JavaScript & Ajax 专栏收录该内容

13 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用CSS定位属性及JavaScript来实现动态改变元素宽度和位置的效果，同时还介绍了如何根据数学函数调整元素显示状态，使网页具备更丰富的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>
        tt
    </title>
    <style type="text/css">
      body{background:black}
     #p1{position:absolute;height:75px;top:200px;}
    </style>
    <script type="text/javascript">
        var left=200;
        var img=document.getElementById('p1');
        var imgWidth=286;
        var pi=Math.PI;
        var x=0,temp=0;
        function init(){
            document.getElementById('p1').style.left=left+'px';
            var set=setInterval('goOn()',40);
        }
        function goOn(){
            temp=Math.cos(x);
            document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px';
            document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px';
            if(temp<0){
                 document.getElementById('p1').style.filter='FlipH(enabled:true)';
            }else{
                document.getElementById('p1').style.filter='FlipH(enabled:false)';
            }
            x+=pi/90;
        }
    </script>
</head>

<body >

<div id="imground">
    <img id="p1" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt=""/>
</div>
<script type="text/javascript">init();</script>
</body>
</html>