動態背景插件Backstretch
阿新 • • 發佈：2018-02-24
ros AI fad 自動 ice www. tle pad 網址
Backstretch是一款簡單的jQuery插件，可以幫助你給網頁添加一個動態的背景圖片，可以自動調整大小適應屏幕的尺寸，當然這樣做的缺點是當圖片尺寸比屏幕小的時候,圖片會因為自動延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動切換。
http://www.jquery-backstretch.com/
https://github.com/jquery-backstretch/jquery-backstretch
具體用法
<script type="text/javascript" src="/jquery.min.js"></script> <script type="text/javascript" src="/jquery.backstretch.min.js"></script>
指定元素實現背景切換，設置切換的圖片與圖片切換的間隔時間duration,代碼以下：
<script> $(function () { $(".container").css({ opacity:0.8 }); //設置透明度 $.backstretch([
"Images/backgrounds/101_1.jpg",
"Images/backgrounds/44_1.jpg"
], { duration: 3000, fade: 750 }); }); </script>
完整代碼
<html> <head> <title>Backstretch</title> <style> .container { width: 90%; margin: 20px auto; background-color: #FFF; padding: 20px; } </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="jquery.backstretch.js"></script> </head> <body> <div class="container">Backstretch是一款簡單的jQuery插件，可以幫助你給網頁添加一個動態的背景圖片，可以自動調整大小適應屏幕的尺寸，當然這樣做的缺點是當圖片尺寸比屏幕小的時候,圖片會因為自動延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動切換。 </div> </body> <script> $(function(){$(".container").css({ opacity:0.8 }); //設置透明度 $.backstretch([ "Images/pic.jpg", "Images/pic2.jpg" ], { duration: 3000, fade: 750 }); }); </script> </html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script> // Backstrech作為body元素的背景 $.backstretch("path/to/image.jpg"); //你也可以將它添加到塊級元素 $(".foo").backstretch("path/to/image.jpg"); // 如果你的元素用CSS定義了一個背景圖像，你可以完全省略參數 $(".foo").backstretch(); // 或者一系列的圖片組 $(".foo").backstretch([ "path/to/image.jpg", "path/to/image2.jpg", "path/to/image3.jpg" ], {duration: 4000}); // 或者，從可以接受分辨率並提供該分辨率的最佳圖像的網址進行加載 $(".foo").backstretch([ "path/to/image.jpg?width={width}&height={height}" ]); // 或者，從一組分辨率中自動選擇。 //寬度是圖像的寬度，並且算法選擇最佳擬合. $(".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" } ] ]); //如果我們想為不同的像素比率指定不同的圖像： $(".foo").backstretch([ [ // Will only be chosed for a @2x device { width: 1080, url: "path/to/[email protected]", 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/[email protected]", pixelRatio: 2 }, { width: 720, url: "path/to/image1_720.jpg", pixelRatio: 1 }, { width: 320, url: "path/to/[email protected]", pixelRatio: 2 }, { width: 320, url: "path/to/image1_320.jpg", pixelRatio: 1 } ] ]); //如果我們希望瀏覽器自動從一組分辨率中進行選擇， //考慮設備的像素比例 $(".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>
動態背景插件Backstretch