jQuery Anystretch 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00379/article/details/141802629

jQuery Anystretch 使用教程

jquery-anystretch项目地址:https://gitcode.com/gh_mirrors/jq/jquery-anystretch

项目介绍

jQuery Anystretch 是一个 jQuery 插件，允许您向任何页面或块级元素添加动态调整大小的背景图像。该图像将拉伸以适应页面/元素，并随着窗口大小的变化自动调整大小。

项目快速启动

安装

首先，您需要将 jQuery 库和 Anystretch 插件文件包含在您的网页中（最好在页面底部，紧接在关闭 BODY 标签之前）：

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

使用

在您的网页中调用 Anystretch 插件：

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

应用案例和最佳实践

案例一：按钮点击切换背景图像

<button id="change-image">Change Image</button>

<script type="text/javascript">
  $(document).ready(function() {
    $('body').anystretch("/path/to/image1.jpg", {speed: 150});

    $('#change-image').click(function() {
      $('body').anystretch("/path/to/image2.jpg");
    });
  });
</script>

案例二：使用数据属性自动选择图像

<div id="myDiv" data-stretch="/path/to/image.jpg"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#myDiv').anystretch();
  });
</script>