0
私はカーテンタイプのサイト、前後のカーテンと前のカーテンを持っています。自宅で私のボタンをクリックして私について私の連続した後部カーテンイメージは変わるべきです。この問題で私を助けてください。私のコードは、これまでの下にここにある:ボタンのクリックで私のウェブサイトの背景を変更するには?
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".hrope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000);
$(".rightcurtain").stop().animate({width:'60px'},2000);
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000);
$(".rightcurtain").stop().animate({width:'51%'}, 2000);
$curtainopen = false;
}
return false;
});
});
$(document).ready(function() {
$curtainopen = false;
$(".arope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000);
$(".rightcurtain").stop().animate({width:'60px'},2000);
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000);
$(".rightcurtain").stop().animate({width:'51%'}, 2000);
$curtainopen = false;
}
return false;
});
});
$(document).ready(function() {
$curtainopen = false;
$(".crope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000);
$(".rightcurtain").stop().animate({width:'60px'},2000);
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000);
$(".rightcurtain").stop().animate({width:'51%'}, 2000);
$curtainopen = false;
}
return false;
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
text-align: center;
background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
background: #4f3722 url('images/home.png') repeat-x;;
}
.div{
background-image:url('images/home.png') repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.hrope{
position:absolute;
top:5px;
left: 70%;
z-index:4;
}
.arope{
position: absolute;
top:5px;
left: 80%;
z-index:4;
}
.crope{
position: absolute;
top:5px;
left: 90%;
z-index:4;
}
</style>
</head>
<body>
<div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>
<img class="logo" src="images/buildinter.jpg"; />
<a class="hrope" href="#">
<img src="images/hrope.png"/>
</a>
<a class="arope" href="#">
<img src="images/arope.png"/>
</a>
<a class="crope" href="#">
<img src="images/crope.png"/>
</a>
</body>
t1でjsfiddleでこれを試してみてください; DRは、あなたが思うあなたの特定の問題や特定の部分を投稿してください助けが必要 –
私はボタンクリック(ボタンの背景ではない)で私の背景を変更したい –