2 qq 36356190 qq_36356190 于 2017.09.18 16:51 提问

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

<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个回答

showbo
showbo   Ds   Rxr 2017.09.18 17:05
已采纳

<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>
showbo
showbo 回复啛喳: 你的这个原本就随机的。自己看这个:http://www.jb51.net/article/9660.htm
2 个月之前 回复
qq_36356190
qq_36356190 是完全用的你的,飘的不自然,而且不能鼠标指向图片静止
2 个月之前 回复
showbo
showbo 回复啛喳: 就我这个代码,不要套你的,关闭要设置display为none,不要设置visibility,要不还是占位,移动出又重启开始了
2 个月之前 回复
qq_36356190
qq_36356190 没用
2 个月之前 回复
qq_36356190
qq_36356190 删掉后,整个静止了
2 个月之前 回复
showbo
showbo 回复啛喳: 你到底测试过代码没有,放上去不是已经不动了。
2 个月之前 回复
qq_36356190
qq_36356190 回复showbo: 怎样让鼠标放在图片上,图片就静止啊,老铁
2 个月之前 回复
showbo
showbo 回复啛喳: 是乱动,你这个代码就是随机屏幕范围内的位置
2 个月之前 回复
qq_36356190
qq_36356190 删掉后,图片不漂浮了
2 个月之前 回复
lunhui1994_
lunhui1994_   2017.09.18 17:56

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

q213546879
q213546879   2017.09.18 18: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>
q213546879
q213546879 回复啛喳: 你把图片放哪了?
2 个月之前 回复
qq_36356190
qq_36356190 我是套用了你的代码啊
2 个月之前 回复
q213546879
q213546879 回复啛喳: 我这就没放图片,哪来的图片跟着鼠标跑?
2 个月之前 回复
qq_36356190
qq_36356190 老铁,你这个图片跟着鼠标到处跑啊,我要鼠标放在上面图片静止
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片