JQUERY背景图全屏按比例缩放插件 JQUERY-BACKSTRETCH

发布时间：2020-06-17 09:46:25 来源：网络阅读：1479 作者：elick 栏目：web开发

jquery-backstretch 是一个用来实现全屏按比例缩放背景图片的jQuery插件，兼容大部分浏览器，但IE6和IE7的支持不理想。

项目主页：http://www.open-open.com/lib/view/home/1344826882069

用法很简单只需要几行简单代码就可以实现背景多种变化

<script> 
  $(function () { 
                      
//用法一 
     $.backstretch("img/bg.jpg"); 
                           
//用法二     
      $("#content").backstretch([ 
      "img/bootstrap-mdo-sfmoma-01.jpg" 
    , "img/bootstrap-mdo-sfmoma-02.jpg" 
    , "img/bootstrap-mdo-sfmoma-03.jpg" 
  ], {duration: 3000, fade: 750});  
                      
                      
//用法三 
  $("#outside").click(function(e) { 
    e.preventDefault(); 
    $("#click-demo").backstretch('img/5560563_103531007912_2.jpg'); 
  }); 
                       
  $("#cheers").click(function(e) { 
    e.preventDefault(); 
    $("#click-demo").backstretch('img/20071029131759934_2.jpg'); 
  }); 
                      
  }) 
</script>

JQUERY背景图全屏按比例缩放插件 JQUERY-BACKSTRETCH

这是我做的一个小例子,不过截图很有趣,这是我通过浏览器截取的图片, 最底层那张背景图蓝天白云那个图片,所显示的区域是我浏览器能看到的区域,看不到的区域他就不绘制了.

有兴趣的可以看下例子

下载地址

向AI问一下细节

JQUERY背景图全屏按比例缩放插件 JQUERY-BACKSTRETCH

猜你喜欢

最新资讯

相关推荐

相关标签