个人中心
gpt4 book ai didi

javascript - 我怎样才能让这个 slider 工作？

转载 作者：行者123 更新时间：2023-11-28 07:01:14 26 4
gpt4 key购买 nike

如何让这段代码滑出？当我单击按钮时，div 滑出，但按钮本身不会移动。另外如何让图像和文本形成两列？使用我的 IDE 时，它显示为两列，但在我的网站上却没有。

谢谢!

$(document).ready(function() {
  $('.rec-anime-button').click(function() {
    if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
      $('.rec-anime-list-container').css('right', '5px');
      $('.rec-anime-button').css('right', '500');
    } else {
      $('.rec-anime-list-container').css('right', '-490px');
      $('.rec-anime-button').css('right', '0');
    }
  });
});
.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Recommended Anime Slider -->
<div class="rec-anime-button">
  <img src="/Rec-Anime-button.png">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
  </ul>
</div>

最佳答案

尝试以下操作:我为每个 li 添加了表格，并在 js 中设置按钮样式时指定 px 进行了小修改 pf。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rec-anime-button">
  <img src="http://static1.squarespace.com/static/51c4ae45e4b0e3594ecb840f/t/522e3eb4e4b0c5d6fd5ef60a/1378762451958/ARKHAM_Animation+Curve+Icon.png" style="width:80px;height:80px;">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
      </td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li></td></tr></table>
  </ul>
</div>

<script>

$(document).ready(function() {
	  $('.rec-anime-button').click(function() {
	    if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
	      $('.rec-anime-list-container').css('right', '5px');
	      $('.rec-anime-button').css('right', '500px');//use px
	    } else {
	      $('.rec-anime-list-container').css('right', '-490px');
	      $('.rec-anime-button').css('right', '0px');//use px
	    }
	  });
	});
</script>
<style>
.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}
ul{ 
  list-style-type: none;
}
</style>

关于javascript - 我怎样才能让这个 slider 工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33220343/

26 4 0
文章推荐： swift - Metal 中的 ASTC 纹理压缩——我应该使用什么作为每行的字节数？
文章推荐： javascript - FullCalendar 叠加层不显示正确的值
文章推荐： swift - SpriteKit : how to find the position at which two sprites or physics bodies contact
文章推荐： javascript - ReactTestUtils 中图像源的评估结果意外
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com