如何让这个滑块工作？

时间：2015-10-19 17:22:44

标签： javascript html css bxslider

如何将此代码滑出？当我单击按钮时，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>

1 个答案:

答案 0 :(得分：0)

尝试下面的内容：我为每个li添加了表格，并在js中设置按钮样式时指定了px的小修改。

<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>

相关问题
最新问题