0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Backgrounds/Real Main Menu.png')">  
<div class="CollapsiblePanel" id="CollapsiblePanel1">
  <div class="CollapsiblePanelTab" tabindex="0">
    <p><center>
      <img src="Backgrounds/Main Menu.png" alt="Main Menu" width="624" height="97" id="Enter" onclick="MM_effectAppearFade(this, 2000, 100, 0, false)"/>
    </center></p>
  </div>
  <div class="CollapsiblePanelContent">
    <center>
      <img id="Background" src="Backgrounds/Title.png" width="100%" height="100%" alt="The website has not loaded properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>

それが今までの私のウェブサイトです。背景を黒くしたいと思います（それはできます：P）。

ただし、折りたたみ可能なパネルをクリックすると、背景を画像、より具体的には次のように変更したいと思います。

background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;

このサイトで見つけたすべての方法を試しました。
MM_effectAppearFade はパネルがクリックされたときに呼び出される関数なので、そこにコードを含めたいと思います。

編集されたコードが機能しない:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
/*body {
    background: url('Backgrounds/Practise.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(Backgrounds/Practise.png);
    overflow:hidden;
}*/
.newBackground{
background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;
}
</style>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<script src="js/jquery.js">

$('.CollapsiblePanel').click(function(){

$('body').addClass('newBackground');

});
</script>

<body onload="MM_preloadImages('Backgrounds/Real Main Menu.png')">  
<div class="CollapsiblePanel" id="CollapsiblePanel1">
  <div class="CollapsiblePanelTab" tabindex="0">
    <p><center>
      <img src="Backgrounds/Main Menu.png" alt="Main Menu" width="624" height="97" id="Enter" onclick="MM_effectAppearFade(this, 2000, 100, 0, false)"/>
    </center></p>
  </div>
  <div class="CollapsiblePanelContent">
    <center>
      <img id="Background" src="Backgrounds/Title.png" width="100%" height="100%" alt="The website has not loaded properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>
4

2 に答える 2

2

新しいスタイルを html に含め、jquery を使用してクリック イベントを折りたたみ可能なスライダーにリッスンし、使用addClass()して新しい背景 css を実装できます。

css を html にインクルードします。

<style>
.newBackground{
background: url('Backgrounds/Practise.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(Backgrounds/Practise.png);
overflow:hidden;
}
</style>

そして、jqueryで次のようにします。

$('.CollapsiblePanel').click(function(){

$('body').addClass('newBackground');


});
于 2013-09-03T17:13:04.223 に答える
1

jquery addclass() 関数を使用できます

http://api.jquery.com/addClass/

于 2013-09-03T17:08:54.887 に答える