Question

只需要一组滚动的div，就像幻灯片放映一样！尚未找到解决方案，需要一种方法，通过单击页面上的某个位置或箭头图像使注释掉的div可滚动？这可能是没有页面重新加载每个＆＃34;幻灯片＆＃34;？希望它在点击时滑入过渡状态并能够返回＆＃34; home＆＃34;

HTML：

<div id="wrapper_home">
    <div id="tey_home">
        <div id="tey_button"> 
        <a href="tey.html"><img src="images/tey_logo-01.png" width="239" height="239" alt="tey_logo" /></a>
        </div> 
    </div>
    <!--
    <div id="afiw_home">
        <div id="home_button"> <a href="home.html"><img src="images/home.png" width="52" height="52" alt="home" class="withfadeout"/></a> </div>
        <div id="afiw_button"> 
        <a href="afiw.html"><img src="images/afiw_logo-01.png" width="460" height="142" class="withfadein2"/></a>
        </div>-->
</div>
</div>

CSS：

.withfadein{
    opacity: 0;
    -webkit-animation: load 20s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadein2{
    opacity: 0;
    -webkit-animation: load 10s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadeout { 
-webkit-transition: all 2s ease-in-out; 
-moz-transition: all 2s ease-in-out; 
-ms-transition: all 2s ease-in-out; 
-o-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out; 
} 
.withfadeout:hover { 
-webkit-opacity: 0.25; 
-moz-opacity: 0.25; 
opacity: 0.25; 
}
#wrapper_index {
    height: 686px;
    width: 1024px;
    background-color: #000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    background-image: url(images/entry_image-01.png);
    background-repeat: no-repeat;
    position: relative;
}
#enter_button {
    width: 140px;
    position: absolute;
    left: 434px;
    top: 501px;
}
#wrapper_home {
    height: 686px;
    width: 1024px;
    background-color: #000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    position: relative;
}
#afiw_home {
    background-image: url(images/afiw.png);
    background-repeat: no-repeat;
    height: 686px;
    width: 1024px;
    position: relative;
}
#afiw_button {
    height: 142px;
    width: 460px;
    position: absolute;
    left: 276px;
    top: 275px;
}
#home_button {
    height: 52px;
    width: 52px;
    padding-top: 50px;
    padding-left: 50px;
}
#tey_home {
    background-image: url(images/tey-01.png);
    background-repeat: no-repeat;
    height: 686px;
    width: 1024px;
    position: relative;
}
#tey_home #tey_button {
    position: absolute;
    height: 239px;
    width: 239px;
    left: 399px;
    top: 222px;
}

非常感谢你的帮助

Answer 1

你应该使用jquery：

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});

点击这一点＆＃39;事件，但您可以根据需要进行更改

Answer 2

在jquery中使用.animate

var target = $("Target Div")
$("Div to fly").animate({'top': target.offset().top,
                         'left':target.offset().left}, 1000);

让另一个div滚动另一个div

2 个答案: