ページに画像があり、その画像ソースを Java スクリプトで変更しています。必要なのは、この画像を美しいスライド効果で変更することだけです。私が欲しいのは、ボタンをクリックして画像を変更すると、最初の画像が消え、別の画像が何らかの適切な方法で表示されることです(ジャークやまばたきのようではありません)
4 に答える
1
最初の画像の後ろに 2 番目の画像を置いてから、最初の画像に fadeout() を適用することができます。
于 2013-05-09T08:31:55.040 に答える
0
このコードを使用してください
$(".firstimage_classname").fadeout(); $(".secondimage_classname").fadeIn();
時間間隔を指定することもできます。
それ以外の場合は試してください
$(".firstimage_classname").slideUp(); $(".secondimage_classname").fadeIn();
于 2013-05-09T08:28:37.037 に答える
0
コード例を次に示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>
于 2013-05-09T10:58:25.730 に答える