获取图片长宽失败和jQuery的animate失效问题


在写一个左右滚动图片的效果时,发生了2个比较头疼的问题。记录如下

首先基本思路是在需要滚动的地方加一个包着img标签的div,js拿到img标签的src值赋给div标签的css属性background-image,然后利用jQuery循环切换div的background-position值即可。

在实现过程中,chrome老是获取到img的宽和高为0,safari浏览器也是如此。后来发现是图片未载入时代码就已经执行了,因此获取到的宽和高为0,给执行函数包个$.load()函数,待img加载完毕再执行代码即可。

然后用此代码在ie又发现了相应的问题,原因还不知道,解决方案就是遇到ie浏览器时,生成个Image()对象,以此来获取img的宽和高。用js怎么判断ie浏览器?使用下面的代码即可:

var ie = ! ','.split(/,/).length;

获取图片宽高这个问题解决了,在利用jQuery的animate()函数对div的background-position进行改变时却发现此代码在firefox下失效了,在chrome下却正常执行,只好谷歌之,发现原因:firefox不支持background-position-x这个属性,而chrome支持,此属性并不是css标准属性。同时还发现animate()函数不能同时处理赋给background-position两个值,如果在animate()中放置一个值的话,浏览器将默认是x方向的值。这样的代码是错误的:

animate({'background-position': '10 0'})
animate({'background-position-x': '10'})

应为:

animate({'background-position': '10'})

这样问题完全解决了,但是如果需要在上下滚动图片的地方怎么办呢,好像只有为position的y方向上数值改变写一个滚动扩展了,临时解决方案可以使用jQuery的css()函数来代替animate()设置position的值,只是没有了好看的效果。

代码(上下滚动的图片):

<div id="img">
    <img src="./img/exa.png">
</div>
<script type="text/javascript">
var ie = ! ','.split(/,/).length;
$('#img img').load(function(){
    var split = 3;
    var order = 1;
    if (ie) {
        var newImg = new Image();
        newImg.src = this.src;
        var height = newImg.height;
        var width = newImg.width;
    } else {
        var height = this.height;
        var width = this.width;
    }
    $('#img').css('width', width);
    $('#img').css('height', height / split);
    $('#img').css('background-image', 'url(' + this.src + ')');
    setInterval(function(){
        if (order == split) {
            order = 0;
            $('#img').css('background-position', '0 0');
        } else {
            $('#img').css('background-position', '0 -' + height / split * order + 'px');
        }
        order++;
    }, 3000);
});
</script>

代码(左右滚动的图片):

<div id="img2">
    <img src="./img/exa2.png">
</div>
<script type="text/javascript">
var ie = ! ','.split(/,/).length;
$('#img2 img').load(function(){
    var split = 3;
    var order = 1;
    if (ie) {
        var newImg = new Image();
        newImg.src = this.src;
        var height = newImg.height;
        var width = newImg.width;
    } else {
        var height = this.height;
        var width = this.width;
    }
    $('#img2').css('height', height);
    $('#img2').css('width', width / split);
    $('#img2').css('background-image', 'url(' + this.src + ')');
    setInterval(function(){
        if (order == split) {
            order = 0;
            $('#img2').animate({'background-position': 0});
        } else {
            $('#img2').animate({'background-position': '-=' + width / split});
        }
        order++;
    }, 3000);
});
</script>

Published

Last Updated

Author

levin

Category

Web

Tags

javascript jQuery
Disqus loading now...