javascript - 关于兼容各大浏览器的问题

问题描述

问 题

以下是一段网页上图片四处滑动的JS,但是只有在IE下有效果，在chrome和火狐都没，给位大神帮忙写个都兼容的。。。。

<script charset="utf-8" src="./Å©×ÊÍõÈí¼þ_files/b.js"></script><script charset="utf-8" src="./Å©×ÊÍõÈí¼þ_files/v.js"></script><script>
    var x = 50, y = 60
    var xin = true, yin = true
    var step = 1
    var delay = 10
    var obj = document.getElementById("codefans_net")
    function float() {
        var L = T = 0
        var R = document.body.innerWidth - obj.offsetWidth
        var B = document.body.clientHeight - obj.offsetHeight
        obj.style.left = x + document.body.scrollLeft
        obj.style.top = y + document.body.scrollTop
        x = x + step * (xin ? 1 : -1)
        if (x < L) { xin = true; x = L }
        if (x > R) { xin = false; x = R }
        y = y + step * (yin ? 1 : -1)
        if (y < T) { yin = true; y = T }
        if (y > B) { yin = false; y = B }
    }
    var itl = setInterval("float()", delay)
    obj.onmouseover = function () { clearInterval(itl) }
    obj.onmouseout = function () { itl = setInterval("float()", delay) } 
</script>

解决方案

https://jsfiddle.net/tfnt2g1n/

用 clientWidth 和 clientHeight 就对了。我这边试了几个浏览器都可以跑。万一有没实现 clientWidth 只实现了 innerWidth 的，可以这样改

var clientWidth = document.body.clientWidth || document.body.innerWidth;
var clientHeight =document.body.clientHeight || document.body.innerHeight; 
var R = clientWidth - obj.offsetWidth;
var B = clientHeight - obj.offsetHeight;

这篇关于javascript - 关于兼容各大浏览器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！