jquery-anystretch, Anystretch是一个可以让你向任何页面或者块级元素添加动态调整大小的背景图像的jQuery插件 图像将拉伸以适应页面/元素,并且随着窗口大小的改变自动调整大小

分享于 

4分钟阅读

GitHub

 
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.
  • 源代码名称:jquery-anystretch
  • 源代码网址:http://www.github.com/danmillar/jquery-anystretch
  • jquery-anystretch源代码文档
  • jquery-anystretch源代码下载
  • Git URL:
    git://www.github.com/danmillar/jquery-anystretch.git
    Git Clone代码到本地:
    git clone http://www.github.com/danmillar/jquery-anystretch
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/danmillar/jquery-anystretch
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Anystretch

    Anystretch是一个可以用于向任何页面或者 block 级别元素添加动态调整大小的background 图像的jQuery插件。
    图像将拉伸以适应页面/元素,并且随着窗口大小的改变自动调整大小。

    演示

    这里软件包中提供了一个示例。 要查看实际操作,请转到: http://wearyoubelong.com

    命令行选项

    positionX

    这个参数控制我们如何在X 轴上定位图像。 ( type=String,options=left|center|right,default=center )

    positionY

    这里参数控制我们如何在Y 轴上定位图像。 ( type=String,options=top|center|bottom,default=center )

    速度

    下载完成后,图像将淡入的速度。 整数被接受,以及标准的jQuery速度字符串( 慢,正常,快)。 ( type=Integer,default=0 )

    ( 仅当不在主体上使用时)的 elPosition

    这是给包含元素的css位置,在除 body 以外的任何元素上。 ( type=String,default=relative )

    dataName

    Anystretch将用于图像名称的数据属性的名称,如果在src中没有提供。 ( type=String,default=stretch )

    设置

    在网页( 最好在页面的底部,在关闭 body 标记之前) 中包含jQuery库和Anystretch插件文件:

    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    
    <script type="text/javascript" src="/jquery.anystretch.min.js"></script>
    
    
    
    

    注意:示例 上面 使用的是,版本的jQuery ;如果你想要自己使用它,还有一个jQuery源文件。

    
    <script type="text/javascript">
    
    
     $.anystretch("/path/to/image.jpg", {speed: 150});
    
    
    </script>
    
    
    
    

    希望在加载Anystretch后更改图像? 没问题,再来一次 !

    
    <script type="text/javascript">
    
    
     $.anystretch("/path/to/image.jpg", {speed: 150});
    
    
    
    //Perhaps you'd like to change the image on a button click
    
    
     $(".button").click(function() {
    
    
     $.anystretch("/path/to/next_image.jpg");
    
    
     });
    
    
    </script>
    
    
    
    

    在页面中,如果需要Anystretch处理一个或者多个元素,而不是页面本身,那么只需在元素上调用它:

    
    <script type="text/javascript">
    
    
     $('#myDiv').anystretch("/path/to/image.jpg", {speed: 150});
    
    
    </script>
    
    
    
    

    在版本 1.2中,Anystretch还可以通过数据属性确定要使用的图像。 默认情况下,Anystretch将使用数据扩展,虽然可以通过设置设置中的dataName来更改。

    
    <script type="text/javascript">
    
    
     $(".stretchMe").anystretch();
    
    
    </script>
    
    
    
    

    变更日志

    版本 1.2

    • 添加了 dataName,允许通过数据anystretch自动使用图像( 默认)

    版本 1.1

    • 从 centeredx/centeredy转换为 positionx/positiony的选项,以便更好地控制

    版本 1.0

    • 这是从 Backstretch ( 版本 1.2 ) 分支

    图像  AUTO  str  添加  动态  Block  
    相关文章