当前位置：首页 > 软件库 > jQuery 插件 > jQuery页面滚动插件 >

jquery-backstretch

jQuery全屏按比例缩放插件

授权协议 MIT

开发语言 JavaScript

所属分类 jQuery 插件、 jQuery页面滚动插件

软件类型开源软件

地区不详

投递者张博涛

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

Backstretch是一个简单的jQuery插件，可将动态调整大小的，具有幻灯片显示功能的背景图片添加到任何页面或元素。图像将拉伸以适合页面/元素，并且将随着窗口/元素尺寸的变化自动调整大小。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
  // To attach Backstrech as the body's background
  $.backstretch("path/to/image.jpg");

  // You may also attach Backstretch to a block-level element
  $(".foo").backstretch("path/to/image.jpg");

  // If your element defines a background image with CSS, you can omit the argement altogether
  $(".foo").backstretch();

  // Or, to start a slideshow, just pass in an array of images
  $(".foo").backstretch([
    "path/to/image.jpg",
    "path/to/image2.jpg",
    "path/to/image3.jpg"    
  ], {duration: 4000});

  // Or, to load from a url that can accept a resolution and provide the best image for that resolution
  $(".foo").backstretch([
    "path/to/image.jpg?width={width}&height={height}"
  ]);

  // Or, to automatically choose from a set of resolutions.
  // The width is the width of the image, and the algorithm chooses the best fit.
  $(".foo").backstretch([
    [
      { width: 1080, url: "path/to/image1_1080.jpg" },
      { width: 720, url: "path/to/image1_720.jpg" },
      { width: 320, url: "path/to/image1_320.jpg" }
    ],
    [
      { width: 1080, url: "path/to/image2_1080.jpg" },
      { width: 720, url: "path/to/image2_720.jpg" },
      { width: 320, url: "path/to/image2_320.jpg" }
    ]
  ]);

  // If we wanted to specify different images for different pixel-ratios:
  $(".foo").backstretch([
    [
      // Will only be chosed for a @2x device
      { width: 1080, url: "path/to/image1_1080@2x.jpg", pixelRatio: 2 },
      
      // Will only be chosed for a @1x device
      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: 1 },
      
      { width: 720, url: "path/to/image1_720@2x.jpg", pixelRatio: 2 },
      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: 1 },
      { width: 320, url: "path/to/image1_320@2x.jpg",  pixelRatio: 2 },
      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: 1 }
    ]
  ]);

  // If we wanted the browser to automatically choose from a set of resolutions,
  // While considering the pixel-ratio of the device
  $(".foo").backstretch([
    [
      // Will be chosen for a 2160 device or a 1080*2 device
      { width: 2160, url: "path/to/image1_2160.jpg", pixelRatio: "auto" }, 
      
      // Will be chosen for a 1080 device or a 540*2 device
      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: "auto" },
      
      // Will be chosen for a 1440 device or a 720*2 device
      { width: 1440, url: "path/to/image1_1440.jpg", pixelRatio: "auto" },
      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: "auto" },
      { width: 640, url: "path/to/image1_640.jpg", pixelRatio: "auto" },
      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: "auto" }
    ]
  ]);
</script>

使用案例

jQuery - 如何动态更改值？(jQuery - How dynamically change the value?)

jQuery - 如何动态更改值？(jQuery - How dynamically change the value?) 我有我的HTML代码：我想jQuery检测用户选择了哪个项目，然后根据公式设置值：如果用户选择值为“1”的radiobutton，则id =“crc”的输入值应为：“20120109 | 1”而不是“20120109 | 0”。换句话说 - 在签名之前保留所有数字“|”
利用jquery.backstretch插件，背景切换

//首页自动更换背景特效开始============================================ 1.引用文件 <script src="jquery.js"></script> <script src="jquery.backstretch.js"></script> $(function(){ $.backstretch(["Image/1.jpg"]); //背
关于在vue中引入jquery或js文件

起最近需要在vue中引入jquery，在网上找了若干资料。以下文章比较靠谱： [参考传送门1](http://www.jianshu.com/p/3746cf6cebe2) [参考传送门2](https://segmentfault.com/a/1190000007020623) 承概述大致步骤： 1，你需要一个jquery.js文件 2，你需要修改webpack.base.conf.j
jquery callback方法

jquery callback方法 callback函数在当前动画100%完成之后执行。 jquery动画的问题许多jquery函数涉及动画。这些函数也许会将speed或duration作为可选参数。例子: $(“p”).hide(“slow”) speed或duration参数可以设置许多不同的值，比如”slow”,”fast”,”normal”或毫秒。实例以下实例在隐藏效果完全实现后回
jquery的change 事件

$(document).ready(function(){ $('#mySelect').change(function(){ alert($(this).children('option:selected').val()); var p1=$(this).children('option:selected').val();//这就是selected的值 var p2=$('#param2').v
jQuery中Callback函数

Callback函数在当前动画100完成之后执行。因为：由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。示例： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML
javascript - JQuery Ajax function return - Stack Overflow

Why do you think it's not working? If you're expecting your function to check and return a value before a form is submitted, it is likely that the availability function is returning before the ajax ch
jQuery.Callbacks()

jq的回调对象是实现jq ajax和defferred的基础模块，通过add添加一系列的回调函数到队列中，并fire触发回调，当然你也可以通过remove删除队列中的回调函数。 1.基本过程，add，fire，remove，empty，has var callbacks = $.Callbacks(); //获取回调队列 function fn1(value){ console.log("fn
jQuery Ajax事件-seriallize()

序列表表格内容为字符串。返回值 jQuery 示例序列表表格内容为字符串，用于Ajax请求。 HTML代码： <p id="result"><b>Results:</b></p> <form> <select name="single"> <option>Single</option> <option>Single2</option>
JQuery 的 Callbacks() 函数

一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。 $.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。 $.Callbacks() 支持的方法，包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callback
jQuery学习（八）效果——callback

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。 jQuery Callback 函数当动画 100% 完成后，即调用 Callback 函数。典型的语法： $(selector).hide(speed,callback) 错误（没有 callba
超实用的jQuery代码段 - jQuery Callback()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
【jQuery 教程】jQuery Callback 函数

jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow") speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例 $("button").click(function(){ $("p").hide(1000)
javascript - 如何在启动Ajax查询的jQuery中触发方法change（） - 堆栈内存溢出

我有一个带有部门清单的选择项目html。当我选择一个(方法“更改”)时，它将在jquery中启动ajax请求，该请求将显示在另一个select输入中，即从数据库中获取的城市列表。一切工作正常，但是我有一种情况想要恢复存储部门选择和区选择项的值，同时又希望能够对其进行修改。我尝试使用jQuery .trigger(“ change”)，但它没有进入我的change函数。我尝试按照此处的说明进
jQuery ajax - serialize() 方法

jQuery ajax - serialize() 方法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串，在这，您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身，进行序列号。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。语法 $(selector).serialize() 实例： <html> <head>
jQuery 中ajax 的 serialize() 方法

示例代码： <form> <div><input type="text" name="a" value="1" id="a" /></div> <div><input type="text" name="b" value="2" id="b" /></div> <div><input type="hidden" name="c" value="3" id="c" /></div>
jQuery Ajax事件-ajaxStop(callback)

AJAX请求结束时执行函数。Ajax事件。返回值 jQuery 参数 callback(Function)：待执行函数示例 AJAX请求结束后隐藏信息。 jQuery代码： $("#loading").ajaxStop(function() { $(this).hide(); });
jQuery Ajax事件-ajaxStart(callback)

AJAX请求开始时执行函数。Ajax事件。返回值 jQuery 参数 callback(Function)：待执行函数示例 $("#loading").ajaxStart(function() { $(this).show(); });
jquery中Callbacks对象的实现

jquery中的Callbacks方法为工具对象，它是一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数的队列。其实Callbacks的思想跟观察者模式的思想相似 Callbacks的用法 function aaa(m){ alert(m); } function bbb(n){ alert(n); } var cb = $.Callbacks();//实例化Call

jquery-backstretch

同类工具

相关阅读

相关文章

相关问答

相关文档