此時我有一個背景圖片滑塊,用戶可以點擊一個按鈕並選擇其中一個圖片作爲背景,同時他們正在查看該網站,當然問題是,當他們點擊扔到不同的頁面時,它會恢復到默認圖像。有沒有一種方法可以讓jquery.cookie.js來解決這個問題?以下是我的嘗試。使用jquery.cookie.js製作背景圖片
,工程jQuery的部分:
$(function(){
$('.btn a').parents('.btn').click(function(){
var img = $(this).attr('data-bg-img'),
afterFadeIn = function() {
$('body').css('background-image', 'url(' + img + ')');
$('bg-style').css('opacity', 0);
};
$('#bg-style')
.css({'background-image': 'url(' + img + ')', 'opacity': 0})
.animate({ 'opacity' : 1 }, 500, afterFadeIn);
});
});
一點不jQuery的部分: $(函數(){
if($.cookie("html_img")) {
$('html').css("background-image", $.cookie("html_img"));
}
$('.btn a').click(function() {
var image = 'imgs/someimage.jpg';
// var image = $(this).attr('src');
$('html').css("background-image", image);
$.cookie("html_img", image, {expires:7});
return false;
});
});
的HTML:
<div id="slideshow" class="bgSlider">
<div class="btn btn1" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2-in-skies.jpg"><a href="#">Button 1</a></div>
<div class="btn btn2" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2.jpg" class="bgimage"><a href="#">Button 2</a></div>
<div class="btn btn3" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/kunhar-river.jpg"><a href="#">Button 3</a></div>
<div class="btn btn4" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/mitre-peak-baltoro.jpg"><a href="#">Button 4</a></div>
<div class="btn btn5" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/musa-ka-musalla.jpg"><a href="#">Button 5</a></div>
<div class="btn btn6" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/nanga-parbat.jpg"><a href="#">Button 6</a></div>
<div class="btn btn7" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/naran-valley.jpg"><a href="#">Button 7</a></div>
<div class="clearfix"></div>
</div>
該CSS:
#bg-style { width:100%; height: 700px; position:absolute; }
.btncontain { width:80%; margin: 0 auto; position:absolute; }
.btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; }
#bg-style {
background: url(../images/k2-in-skies.jpg) no-repeat center top;
}
非常感謝!
您能否介紹一下爲什麼這樣不起作用?你看到了什麼?你能用瀏覽器的開發工具中的斷點進入嗎?你看到了什麼? – Rup 2012-07-06 11:39:40
感謝Rup,恐怕我不知道如何設置斷點(但是),但是在Chromes Console中查看它並不會返回任何錯誤,所以我不確定它會發生什麼情況? – Nsokyi 2012-07-06 12:48:13
在Chrome的開發人員工具中,轉到腳本選項卡,找到此代碼,然後左鍵單擊要停止的功能中的行號。 – Rup 2012-07-06 13:05:22