幻灯片/轮播

基于Bootstrap的垂直滚动新闻特效

创客主机


这是一款基于Bootstrap的垂直滚动新闻特效。原生的Bootstrap只有水平的轮播图插件。该特效通过修改HTML结构和CSS样式来达到垂直滚动轮播的效果。

使用方法:

在页面中引入jquery和bootstrap的相关文件。

  1. <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
  2. <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  3. <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

HTML结构:

该垂直滚动新闻特效的基本HTML结构如下:

  1. <div class="bg-demo">
  2.   <div class="container">
  3.     <div id="carousel-example-vertical" class="carousel vertical slide">
  4.       <div class="carousel-inner" role="listbox">
  5.         <div class="item active">
  6.           <p class="ticker-headline">
  7.             <a href="#">
  8.               滚动新闻内容。。。
  9.             </a>
  10.           </p>
  11.         </div>
  12.         ......
  13.       </div>
  14.       <!-- 上下箭头按钮 -->
  15.       <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
  16.         <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
  17.         <span class="sr-only">Previous</span>
  18.       </a>
  19.       <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
  20.         <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
  21.         <span class="sr-only">Next</span>
  22.       </a>
  23.     </div>
  24.   </div>
  25. </div>

CSS样式:

为该垂直滚动新闻特效添加下面的CSS样式:

  1. body {
  2.   margin: 50px 0;
  3. }
  4. .bg-demo{
  5.   background: #66677c;
  6. }
  7. .ticker-headline {
  8.   overflow: hidden;
  9.   text-overflow: ellipsis;
  10.   white-space: nowrap;
  11.   padding: 25px 0;
  12.   margin: 0;
  13.   font-size: 18px;
  14. }
  15.  
  16. .carousel.vertical .carousel-inner {
  17.   height: 100%;
  18.   width: auto;
  19. }
  20. .carousel.vertical .carousel-inner > .item {
  21.   width: auto;
  22.   padding-right: 50px;
  23.   -webkit-transition: 0.6s ease-in-out top;
  24.   transition: 0.6s ease-in-out top;
  25. }
  26. @media all and (transform-3d), (-webkit-transform-3d) {
  27.   .carousel.vertical .carousel-inner > .item {
  28.     -webkit-transition: 0.6s ease-in-out;
  29.     transition: 0.6s ease-in-out;
  30.   }
  31.   .carousel.vertical .carousel-inner > .item.next, 
  32.   .carousel.vertical .carousel-inner > .item.active.right {
  33.     -webkit-transform: translate3d(0, 100%, 0);
  34.             transform: translate3d(0, 100%, 0);
  35.     top: 0;
  36.   }
  37.   .carousel.vertical .carousel-inner > .item.prev, 
  38.   .carousel.vertical .carousel-inner > .item.active.left {
  39.     -webkit-transform: translate3d(0, -100%, 0);
  40.             transform: translate3d(0, -100%, 0);
  41.     top: 0;
  42.   }
  43.   .carousel.vertical .carousel-inner > .item.next.left, 
  44.   .carousel.vertical .carousel-inner > .item.prev.right, 
  45.   .carousel.vertical .carousel-inner > .item.active {
  46.     -webkit-transform: translate3d(0, 0, 0);
  47.             transform: translate3d(0, 0, 0);
  48.     top: 0;
  49.   }
  50. }
  51. .carousel.vertical .carousel-inner > .active,
  52. .carousel.vertical .carousel-inner > .next,
  53. .carousel.vertical .carousel-inner > .prev {
  54.   display: block;
  55. }
  56. .carousel.vertical .carousel-inner > .active {
  57.   top: 0;
  58. }
  59. .carousel.vertical .carousel-inner > .next,
  60. .carousel.vertical .carousel-inner > .prev {
  61.   position: absolute;
  62.   top: 0;
  63.   width: 100%;
  64. }
  65. .carousel.vertical .carousel-inner > .next {
  66.   top: 100%;
  67. }
  68. .carousel.vertical .carousel-inner > .prev {
  69.   top: -100%;
  70. }
  71. .carousel.vertical .carousel-inner > .next.left,
  72. .carousel.vertical .carousel-inner > .prev.right {
  73.   top: 0;
  74. }
  75. .carousel.vertical .carousel-inner > .active.left {
  76.   top: -100%;
  77. }
  78. .carousel.vertical .carousel-inner > .active.right {
  79.   top: 100%;
  80. }
  81.  
  82. .carousel.vertical .carousel-control {
  83.   left: auto;
  84.   width: 50px;
  85. }
  86. .carousel.vertical .carousel-control.up {
  87.   top: 0;
  88.   right: 0;
  89.   bottom: 50%;
  90. }
  91. .carousel.vertical .carousel-control.down {
  92.   top: 50%;
  93.   right: 0;
  94.   bottom: 0;
  95. }
  96. .carousel.vertical .carousel-control .icon-prev,
  97. .carousel.vertical .carousel-control .icon-next,
  98. .carousel.vertical .carousel-control .glyphicon-chevron-up,
  99. .carousel.vertical .carousel-control .glyphicon-chevron-down {
  100.   position: absolute;
  101.   top: 50%;
  102.   z-index: 5;
  103.   display: inline-block;
  104. }
  105. .carousel.vertical .carousel-control .icon-prev,
  106. .carousel.vertical .carousel-control .glyphicon-chevron-up {
  107.   left: 50%;
  108.   margin-left: -10px;
  109.   top: 50%;
  110.   margin-top: -10px;
  111. }
  112. .carousel.vertical .carousel-control .icon-next,
  113. .carousel.vertical .carousel-control .glyphicon-chevron-down {
  114.   left: 50%;
  115.   margin-left: -10px;
  116.   top: 50%;
  117.   margin-top: -10px;
  118. }
  119. .carousel.vertical .carousel-control .icon-up,
  120. .carousel.vertical .carousel-control .icon-down {
  121.   width: 20px;
  122.   height: 20px;
  123.   line-height: 1;
  124.   font-family: serif;
  125. }
  126. .carousel.vertical .carousel-control .icon-prev:before {
  127.   content: '\2039';
  128. }
  129. .carousel.vertical .carousel-control .icon-next:before {
  130.   content: '\203a';
  131. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!