我已经完成了这项工作。像这样的 JSFIDDLE .但我想再深入一点。我想让它在页面加载时自动展开。但是,到目前为止我已经尝试过了,但无法完成这项工作。这是我的代码。
HTML
<div id="adsBox">
<a id="ads" class="bg90" href="#"></a>
<div> <a id="showLink" class="showAds">SHOW</a> </div>
</div>
CSS
#adsBox{
text-align:right;
width:400px;
margin:0 auto;
background-color:#E0E0E0;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
#ads{
display: block;
}
.bg90
{
background: url(http://i60.tinypic.com/16gkd5c.jpg) 400px 90px;
height: 90px;
}
.bg200
{
background: url(http://i60.tinypic.com/b9hx60.gif) 400px 200px;
height: 200px;
}
#adsBox a {
color:#000;
padding:0;
margin:0;
cursor: pointer;
}
#adsBox a:hover {
color:#4682b4;
}
#ads img {
width:100%;
}
#showLink {
text-decoration:none;
}
.hideLink {
display:none;
}
.expandImage {
display:none;
}
和jQuery
setTimeout(function() {
$("#ads").slideToggle(1000);
}, 300);
$(document).ready(function () {
$('.showAds').click(function () {
if ($(this).text() == 'HIDE') {
$(this).text('SHOW');
$('#ads').animate({height:"90px"}, 400, function() { $('#ads').toggleClass('bg200'); });
} else {
$(this).text('HIDE');
$('#ads').animate({height:"200px"}, 400);
$('#ads').toggleClass('bg200');
}
});
});
问题是,当页面加载时,图像向上滑动。我想要的是图像(高度 90px)会自动扩展为(高度 200px)。有什么想法吗?
最佳答案
试试这个: http://jsfiddle.net/ewYc3/26/ (3秒后的方法)
$(document).ready(function () {
setTimeout(function() {
goToggle();
}, 3000);
$('.showAds').click(function () {
goToggle();
});
});
function goToggle(){
if ($('.showAds').text() == 'HIDE') {
$('.showAds').text('SHOW');
$('#ads').animate({height:"90px"}, 400, function() {
$('#ads').toggleClass('bg200'); });
} else {
$('.showAds').text('HIDE');
$('#ads').animate({height:"200px"}, 400);
$('#ads').toggleClass('bg200');
}
}
关于javascript - slider 设置功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22442633/