Trong bài trước chúng ta đã làm thế nào để làm cho nền của blog đầy màn hình phụ thuộc vào độ phân giải của màn hình . Phương pháp mà chúng tôi sẽ sử dụng ngay bây giờ với jQuery là một plugin gọi là BackStretch mà cũng có tùy chọn của việc tạo ra một slideshow hình ảnh làm hình nền blog mà không mất tài sản của điều chỉnh chiều rộng và chiều cao của màn hình.

Những gì chúng ta sẽ làm gì trong mục này chỉ là điều này, cố gắng làm cho nền của blog để có một số hình ảnh được thay đổi, tất cả với hiệu ứng mờ dần giữa các quá trình chuyển đổi.

Bạn có thể xem một ví dụ trong này blog này.

Đưa slideshow này trong nền của blog, chỉ cần vào Template - Edit HTML và trước </ head> thêm đoạn mã sau:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
/ / <! [CDATA [
/ *
* JQuery Backstretch
* Phiên bản 1.2.8
* Http://srobbin.com/jquery-plugins/jquery-backstretch/
* Thêm một hình nền tự động thay đổi kích cỡ để-trang
* Bản quyền (c) 2012 Scott Robbin (srobbin.com)
* Được cấp phép theo giấy phép MIT
* Https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
* /
; (Function (

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

/ / <! [CDATA [
hình ảnh var = [
"Image URL",
"Image URL",
"Image URL",
"Image URL",
"Image URL",
];

$ (Hình ảnh). Mỗi (function () {
$ ('<img/>') Src [0] = này.
});
var index = 0;
. $ Backstretch (hình ảnh [index], {tốc độ: 1000});
var slideshow = setInterval (function () {
index = (chỉ số> = images.length - 1)? 0: chỉ số 1;
. $ Backstretch (hình ảnh [index]);
}, 5000);
/ /]]>
</ Script>

Đây thêm URL của hình ảnh đó sẽ là nền của blog của bạn.
Nếu bạn muốn thêm nhiều hình ảnh, chỉ cần thêm sau khi những hình ảnh var = [một dòng như thế này:

"Image URL",

Các hình ảnh sẽ được thay đổi theo thứ tự bạn đã thêm họ, nếu bạn muốn những xuất hiện theo một thứ tự ngẫu nhiên, sau đó thay đổi phần thứ hai của mã này:

<script> / / <! [CDATA [ hình ảnh var = new Array (); hình ảnh [1] = "Image URL"; hình ảnh [2] = "Image URL"; hình ảnh [3] = "Image URL"; hình ảnh [4] = "Image URL"; hình ảnh [5] = "Image URL"; Array.prototype.shuffle = function () { var len = this.length; var i = len; trong khi (i -) { var p = parseInt (Math.random () * len); var t = này [i]; này [i] = này [p]; này [p] = t; } }; images.shuffle (); $ (Hình ảnh). Mỗi (function () { $ ('<img/>') Src [0] = này. }); var index = 0; . $ Backstretch (hình ảnh [index], {tốc độ: 1000}); var slideshow = setInterval (function () { index = (chỉ số> = images.length - 1)? 0: chỉ số 1; . $ Backstretch (hình ảnh [index]); }, 5000); / /]]> </ Script>

Bạn cũng có thể thêm hình ảnh bằng cách thêm một dòng như thế này:

hình ảnh [6] = "Image URL";

Nhưng bạn sẽ thấy rằng trong trường hợp này có một số số liên tiếp trong màu xanh, vì vậy nếu bạn thêm khác như 6, sau đó là một tiếp theo sẽ là 7, vv.

Trong cả hai trường hợp, bạn có thể thay đổi thời gian của mỗi hình ảnh mà là ở giá trị 5000 đó là ở phần cuối của kịch bản.
Ưu điểm của hình tự động này trong nền của blog là hình ảnh sẽ được tự động thay đổi kích thước với kích thước của màn hình, do đó, không có vấn đề giải quyết, nó sẽ giống tốt.

Nó là giá trị ghi nhớ rằng nếu bạn đang sử dụng Scriptaculous, bạn phải thực hiện một số thay đổi, và nếu bạn đã sử dụng jQuery, nên để lại chỉ có một phiên bản .

làm thế nào để làm cho nền của blog đầy màn hình phụ thuộc vào độ phân giải của màn hình

Uploaded by: HỘI NGƯỜI VIỆT NAM TẠI SLOVAKIA

Views:

Category: làm thế nào để làm cho nền của blog đầy màn hình phụ thuộc vào độ phân giải của màn hình, PROSHOW STYLE 2013

Share

Tweet