4

潜在的な背景の20pxx20pxの画像のミニメニューを含めたいと思います。ユーザーがそれらの1つをクリックすると、ボディの背景画像が変更され、選択内容がユーザーの選択として保存されます。

liスライダーを使用することを考えましたが、どのように画像をaに入れ、選択に基づいて本体のCSSを変更できるかわかりません。

何か案は？

ハッピー7月4日

編集私はそのクッキーにimgURLを保存しようとしています、それは機能していません、それはクッキーに保存していますが、クッキーの内容を取得していません

以下の作品を編集してください、!!!!!!! しかし、私が追加しても背景色は常に白です $("html").css("background-color","red");

修正、URLの最後に色を追加

$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 


$(document).ready(function() {
$("#BGSelector a").click(function() {
    var imgLink = $("img", this).attr("src");
    $.cookie("html_img", "" + imgLink + "", { expires: 7 });
    var imgCookieLink = $.cookie("html_img");
    $("html").css("background", "url('" + imgCookieLink + "')");
});
});

<script type="text/javascript">
$(document).ready(function() { 
    $("#BGSelector a").click(function() {
       var imgLink = $("img", this).attr("src");
       $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 });
       var imgCookieLink = $.cookie("html_img");       
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center    top"); 
    }); 
 });

</script>

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top");

 });

</script>
4

3 に答える 3

9

離散的なものを「選択」するという観点から、なぜスライダーを使用するのかわかりません。一般に、スライダーは、RGB値（各チャネルは0〜255から始まります）の選択など、継続的に変化する値用です。ミニメニューの場合、これは非常に単純なJQ +CSSです。

メニューのHTMLマークアップ

<ul id="BGSelector">
    <li><a href="#ChangeBG"><img src="bgImageSource1"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource2"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource3"/></a></li>
</ul>

そしてMagicJQステートメント

// Init the bg change UI (which is within document ready)
$(function(){
    $("#BGSelector a").click(function() {
        var imgLink = $("img", this).attr("src");

        // change the body background css
        $("body").css("background", "url('" + imgLink + "')");
    });
});
于 2009-07-05T01:49:28.560 に答える
2

私も同じ問題を抱えていました。これが役立つかどうかはわかりませんが、私がやったことは

var url= data.bgimg[0] ;
$('body').css('background-image',"url(" + url + ")");

ここで、url は (明らかに) img へのパスです。json経由で取得しましたが、変更できます。

于 2010-01-28T00:56:17.180 に答える
0 
var newBg = ['headercaption.gif', 'loading.gif', 'excelexport.gif', 'grid-layer.gif'];
var path="themes/default/images/";
var i = 0;
var rotateBg = setInterval(function(){
    $('body').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
    if(i==4)
     i=0;
     else
      i++;
}, 5000);
于 2011-04-07T06:15:32.030 に答える