啛喳
2017-09-18 08:51
采纳率: 66.7%
浏览 1.1k

鼠标指向漂浮中的图片后,图片静止,怎么加静止代码?


<div  id="img"   onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<a href="#" ></a><br><span class="reset" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭 X</span>
</div>
<script type="text/javascript"> 
var xPos=300; 
var yPos=200; 
var step=1; 
var delay=16; 
var height=0; 
var Hoffset=0; 
var Woffset=0; 
var yon=0; 
var xon=0; 
var pause=false; 
var interval; 
changePos("img") ;

function changePos(objName) 
{ 

var thediv=document.getElementById(objName);
thediv.style.position="absolute";
thediv.style.left=parseInt(window.screen.availWidth*Math.random()) + "px";
thediv.style.top=parseInt(window.screen.availHeight*Math.random()) + "px";
thediv.setAttribute("xDir",1);
thediv.setAttribute("yDir",1);
window.setInterval("randPosition(" + objName + ")","18","JavaScript");
}

function randPosition(obj)
{
var x=parseInt(obj.style.left);
if(x>=1500)
obj.setAttribute("xDir",-1);
if(x<=0)
obj.setAttribute("xDir",1);
x+=parseInt(obj.getAttribute("xDir"));

var y=parseInt(obj.style.top);
if(y>=700)
obj.setAttribute("yDir",-1);
if(y<=0)
obj.setAttribute("yDir",1);
y+=parseInt(obj.getAttribute("yDir"));

obj.style.left=x +"px";
obj.style.top =y +"px";
}
function start() {
img.style.visibility  = "visible";
interval = setInterval('changePos()', delay);
}
start();


</script >

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳
    
    <div id="img" style="position: absolute; left: 2px; top: 43px;visibility :visible;"
          onmouseover="clearInterval(interval)" 
         onmouseout="start()" align="middle">
        <a href="#"></a><br><span class="reset" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭 X</span>
    </div>
    <script type="text/javascript">
        var xPos = 300;
        var yPos = 200;
        var step = 1;
        var delay = 1000;
        var height = 0;
        var Hoffset = 0;
        var Woffset = 0;
        var yon = 0;
        var xon = 0;
        var pause = false;
        var interval;
        changePos("img");
    
        function changePos(objName) {
    
            var thediv = document.getElementById(objName);
            thediv.style.position = "absolute";
            thediv.style.left = parseInt(window.screen.availWidth * Math.random()) + "px";
            thediv.style.top = parseInt(window.screen.availHeight * Math.random()) + "px";
            thediv.setAttribute("xDir", 1);
            thediv.setAttribute("yDir", 1);
            //不要这句,要不没次执行都会起动新计时器了
            //interval = window.setInterval("randPosition('" + objName + "')", "18", "JavaScript");
        }
    
        function randPosition(obj) {
            var x = parseInt(obj.style.left);
            if (x >= 1500)
                obj.setAttribute("xDir", -1);
            if (x <= 0)
                obj.setAttribute("xDir", 1);
            x += parseInt(obj.getAttribute("xDir"));
    
            var y = parseInt(obj.style.top);
            if (y >= 700)
                obj.setAttribute("yDir", -1);
            if (y <= 0)
                obj.setAttribute("yDir", 1);
            y += parseInt(obj.getAttribute("yDir"));
    
            obj.style.left = x + "px";
            obj.style.top = y + "px";
        }
        function start() {
            img.style.visibility = "visible";
            interval = setInterval('changePos("img")', delay);
        }
        start();
    
    
    </script>
    
    已采纳该答案
    打赏 评论
  • Eighteen Z 2017-09-18 09:56

    hover清除定时器,离开时续绑定时器

    打赏 评论
  • /*----无忧----*/ 2017-09-18 10:33

    别这么写啊老铁,js不要写在行间,css也不要写在行间,多乱啊!
    然后你的定时器管理,这里一个定时器就可以了呀!
    再然后你在定时器里去获取元素的属性,很耗性能的!
    重新给你写了一段,看看吧

     <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            #img{
                position: absolute;
                left: 2px;
                top: 43px;
                visibility:visible;
            }
        </style>
    </head>
    <body>
    <div  id="img">
        <span class="reset">关闭&times;</span>
    </div>
    <script type="text/javascript">
    
        var floatPos = {
            init:function(option){
                var _this = floatPos;
                _this.delay = 16;
                _this.node = document.getElementById(option.obj);
                _this.maxWidth = document.documentElement.clientWidth - _this.node.clientWidth;
                _this.maxHeight = document.documentElement.clientHeight - _this.node.clientHeight;
                _this.moveX = Math.random()>0.5?-1:1;
                _this.moveY = Math.random()>0.5?-1:1;
                _this.timer = null;
                console.log(Math.random());
                _this.setRandomPos();
                _this.control();
            },
            setRandomPos:function(){
                var _this = floatPos,
                radomX = parseInt(_this.maxWidth*Math.random()) + "px",
                radomY = parseInt(_this.maxHeight*Math.random()) + "px";
                _this.node.style.cssText = 'left:'+ radomX +';top:'+radomY;
                _this.nodeX=parseInt(_this.node.style.left);
                _this.nodeY=parseInt(_this.node.style.top);
                _this.movePos();
            },
            movePos:function(){
                var _this = floatPos;
                _this.timer = setInterval(function(){
                    if(_this.nodeX >= _this.maxWidth){
                        _this.moveX = -1;
                    }
                    if(_this.nodeX < 0){
                        _this.moveX = 1;
                    }
                    if(_this.nodeY>=_this.maxHeight){
                        _this.moveY = -1;
                    }
                    if(_this.nodeY < 0){
                        _this.moveY = 1;
                    }
                    _this.nodeX += _this.moveX;
                    _this.nodeY += _this.moveY;
                    _this.node.style.cssText = 'left:'+ _this.nodeX +'px; top:'+_this.nodeY+'px';
                },_this.delay);
            },
            control:function(){
                var _this = floatPos;
                _this.node.onmouseover = function(){
                    clearInterval(_this.timer);
                }
                _this.node.onmouseout = function(){
                    _this.movePos();
                }
            }
        };
        floatPos.init({obj:'img'});
    </script >
    </body>
    </html>
    
    打赏 评论

相关推荐 更多相似问题