波斯马BOSSMA Information Technology

Jquery结合div+css实现图片水平横向不间断滚动效果

发布时间:2010年11月24日 / 分类:JavaScript / 19,380 次浏览 / 评论

关于实现滚动效果现在提供一个新的类库,功能更多,浏览器兼容性更强,点此移步过去看看。

水平滚动和垂直滚动的代码已经有很多了,这篇文章可以看成是多余的。不过还是有几个亮点:1、使用jquery;2、使用div+css;3、兼容IE、Firefox、Opera、Chrome;4、兼容XHTML 1.0  Transitional。

发布一个例子,点击下载

直接看代码吧:

注意id=”right”的div紧跟前边div,没有换行和空格,显示的时候就不会出现空格了。

关于inline-block产生间距的问题:

1)在父容器定义font-size:0px; 然后对定义display:inline-block的容器重新定义字体大小。此方法兼容FF跟IE,不兼容CHROME

2)在父容器定义letter-spacing:-4px; 然后对定义display:inline-block的容器重新定义letter-spacing:0px,“-4px”数值来自字体大小

3)把inline-block元素全部写在一行,去掉空格与换行。

上边的代码运行起来没什么问题,但是在XHTML 1.0标准下IE不能正常运行。改了半天,代码如下:

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Jquery结合div+css实现图片水平横向不间断滚动效果

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有5 条评论

  1. bossma 地板:

    @603316800
    已经处理,请重新下载

  2. 603316800 板凳:

    ie8 加上这句话就不行了

  3. .Ghost 沙发:

    这个不错,不过在IE8里面就没有滚动的效果了,不知道是IE8的scrollLeft()有问题还是JQ里面scrollLeft()的一个BUG

发表评论