js网站广告悬浮代码

Html

Css

#flo {
	width:300px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
}
#flo img {
	width:100%;
	height:100%
}

var flo = document.getElementById('flo');
var open = document.getElementById('open');
var max_left = document.documentElement.clientWidth - flo.offsetWidth; //可视区宽度减去div本身的宽度
var max_top = document.documentElement.clientHeight - flo.offsetHeight //可视区高度减去div本身的高度
var t = 1,
    l = 1;

function flao() {
    var old_left = flo.offsetLeft;
    var old_top = flo.offsetTop;
    //新的left 和 top 
    var new_left = old_left + l;
    var new_top = old_top + t;

flo.style.left = new_left + 'px';
    flo.style.top = new_top + 'px';
    if (new_top == max_top || new_top == 0) {
        // alert('daodile')
        t = -1 * t;
    }
    if (new_left == max_left || new_left == 0) {
        l = -1 * l;
    }
}
var timer = setInterval(flao, 10);
flo.onmousemove = function() {
    clearInterval(timer)
}
flo.onmouseout = function() {
    timer = setInterval(flao, 10);
}
window.onresize = function() {
    max_left = document.documentElement.clientWidth - flo.offsetWidth; //可视区宽度减去div本身的宽度
    max_top = document.documentElement.clientHeight - flo.offsetHeight //可视区高度减去div本身的高度
    flo.style.left = 0 + 'px';
    flo.style.top = 0 + 'px';
    t = 1, l = 1;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

js网站广告悬浮代码



代码描述：js网站广告悬浮回弹效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

／°ζ、何须做作

相关代码

js网站广告悬浮代码

最新