在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ JQUERY如何實(shí)現(xiàn)一張長(zhǎng)圖滾動(dòng)，鼠標(biāo)移動(dòng)上去停止?jié)L動(dòng)呢？

JQUERY如何實(shí)現(xiàn)一張長(zhǎng)圖滾動(dòng)，鼠標(biāo)移動(dòng)上去停止?jié)L動(dòng)呢？

共若干個(gè)標(biāo)簽

<div class="box">
    <div class="img"><img src="圖片地址" /></div>
</div>
<div class="box">
    <div class="img"><img src="圖片地址" /></div>
</div>
<div class="box">
    <div class="img"><img src="圖片地址" /></div>
</div>

其中box高度只有100px，超出隱藏，而img高度有1000px，目前想實(shí)現(xiàn)的效果是，這三個(gè)圖片各自自動(dòng)上下無限滾動(dòng)，鼠標(biāo)移動(dòng)到圖片上就會(huì)停止?jié)L動(dòng)。請(qǐng)問該如何實(shí)現(xiàn)呢？非常感謝！~

回答
編輯回答
凝雅

用jq可以引slider.js來做

其實(shí)這個(gè)效果不用js也能實(shí)現(xiàn)

<div class="box">
  <div class="img">
    <img src="http://placekitten.com/200/1000" />
    <img src="http://placekitten.com/200/1000" />   </div>
</div>
.box {
  position:relative;
  width: 200px;
  height:100px;
  overflow:hidden;
}
.img{
  position:absolute;
  animation:move 8s linear infinite;
}
.img:hover{
  animation-play-state:paused;
}
@keyframes move{
  from {top:0px;}
  to {top:-1000px;}
}

展示效果https://codepen.io/caocong/pe...

2017年12月25日 23:18