A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© java_dream 中级黑马   /  2014-8-20 10:33  /  1014 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<html>
  <head>
    <style type="text/css">
         img{margin:0;padding:0;width:0px;height:0px;background:url(1.jpg);
             position:absolute;}
        </style>
    <script>
        window.onload = function()
        {
                var oDiv = document.getElementById('img1');
                var iSpeedX = 0;
                var iSpeedY = 0;
                var prevX = 0;
                var prevY = 0;

                oDiv.onmousedown = function(ev)
                {
                        var oEv = ev || window.event;
                        var disX = oEv.clientX - oDiv.offsetLeft;
                        var disY = oEv.clientY - oDiv.offsetTop;
                        iSpeedX = oEv.clientX - prevX;
                        iSpeedY = oEv.clientY - prevY;
                        prevX = oEv.clientX;
                        prevY = oEv.clientY;

                        clearInterval(oDiv.timer);
                        document.onmousemove = function(ev)
                        {
                                var oEv = ev || window.event;
                            iSpeedX = oEv.clientX - prevX;
                            iSpeedY = oEv.clientY - prevY;
                            prevX = oEv.clientX;
                            prevY = oEv.clientY;

                                oDiv.style.left = oEv.clientX - disX + 'px';
                                oDiv.style.top = oEv.clientY - disY + 'px';
                        }
                        document.onmouseup = function()
                        {
                                document.onmousemove = null;
                                document.onmouseup = null;
                                startMove();
                        }

                        return false;
                }

                toChange(210);

                function  toChange(iTarget)
                {
                        oDiv.style.left = (document.documentElement.clientWidth-oDiv.clientWidth)/2 + 'px';
                        oDiv.style.top = (document.documentElement.clientHeight-oDiv.clientHeight)/2 + 'px';
                        var offsetL = oDiv.offsetLeft;
                        var offsetT = oDiv.offsetTop;
                       
                        clearInterval(oDiv.timer);
                        oDiv.timer = setInterval(function(){
                                if(oDiv.clientWidth==iTarget)
                                {
                                        clearInterval(oDiv.timer);
                                        startMove();
                                }
                                else
                                {
                                    oDiv.style.width = oDiv.offsetWidth + 10 + 'px';
                                    oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
                                    oDiv.style.left = offsetL - oDiv.offsetWidth/2 + 'px';
                                    oDiv.style.top = offsetT - oDiv.offsetHeight/2 + 'px';
                                }
                        },30);
                }

                function startMove()
                {
                        clearInterval(oDiv.timer);
                        oDiv.timer = setInterval(function(){
                                iSpeedY += 3;
                                var L = oDiv.offsetLeft + iSpeedX;
                                var T = oDiv.offsetTop + iSpeedY;
                                if(L>=document.documentElement.clientWidth-oDiv.offsetWidth)
                                {
                                        oDiv.style.left = document.documentElement.clientWidth-oDiv.offsetWidth + 'px';
                                        iSpeedX *= -0.75;
                                        iSpeedY *= 0.75;
                                }
                                else if(L<=0)
                                {
                                        oDiv.style.left = 0 + 'px';
                                        iSpeedX *= -0.75;
                                        iSpeedY *= 0.75;
                                }
                                else
                                {
                                        oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
                                }

                                if(T>=document.documentElement.clientHeight-oDiv.offsetHeight)
                                {
                                        oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight + 'px';
                                        iSpeedX *= 0.75;
                                        iSpeedY *= -0.75;
                                }
                                else if(T<=0)
                                {
                                        oDiv.style.top = 0 + 'px';
                                        iSpeedX *= 0.75;
                                        iSpeedY *= -0.75;
                                }
                                else
                                {
                                        oDiv.style.top = oDiv.offsetTop + iSpeedY + 'px';
                                }
                        },30);
                }
        }
        </script>
  </head>
  <body>
    <img id="img1" src="1.jpg" />
  </body>
</html>

1.jpg (20.78 KB, 下载次数: 16)

足球

足球

1 个回复

倒序浏览
赞赞赞!!!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马