温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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
 
用法很简单只需要几行简单代码就可以实现背景多种变化
 
 
  1. <script> 
  2.   $(function () { 
  3.                       
  4. //用法一 
  5.      $.backstretch("img/bg.jpg"); 
  6.                            
  7. //用法二     
  8.       $("#content").backstretch([ 
  9.       "img/bootstrap-mdo-sfmoma-01.jpg" 
  10.     , "img/bootstrap-mdo-sfmoma-02.jpg" 
  11.     , "img/bootstrap-mdo-sfmoma-03.jpg" 
  12.   ], {duration: 3000, fade: 750});  
  13.                       
  14.                       
  15. //用法三 
  16.   $("#outside").click(function(e) { 
  17.     e.preventDefault(); 
  18.     $("#click-demo").backstretch('img/5560563_103531007912_2.jpg'); 
  19.   }); 
  20.                        
  21.   $("#cheers").click(function(e) { 
  22.     e.preventDefault(); 
  23.     $("#click-demo").backstretch('img/20071029131759934_2.jpg'); 
  24.   }); 
  25.                       
  26.   }) 
  27. </script> 
 
 
 

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

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

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI