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

简要教程

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

使用方法

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

HTML结构

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

滚动新闻内容。。。

......

Previous

Next

CSS样式

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

body {

margin: 50px 0;

}

.bg-demo{

background: #66677c;

}

.ticker-headline {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

padding: 25px 0;

margin: 0;

font-size: 18px;

}

.carousel.vertical .carousel-inner {

height: 100%;

width: auto;

}

.carousel.vertical .carousel-inner > .item {

width: auto;

padding-right: 50px;

-webkit-transition: 0.6s ease-in-out top;

transition: 0.6s ease-in-out top;

}

@media all and (transform-3d), (-webkit-transform-3d) {

.carousel.vertical .carousel-inner > .item {

-webkit-transition: 0.6s ease-in-out;

transition: 0.6s ease-in-out;

}

.carousel.vertical .carousel-inner > .item.next,

.carousel.vertical .carousel-inner > .item.active.right {

-webkit-transform: translate3d(0, 100%, 0);

transform: translate3d(0, 100%, 0);

top: 0;

}

.carousel.vertical .carousel-inner > .item.prev,

.carousel.vertical .carousel-inner > .item.active.left {

-webkit-transform: translate3d(0, -100%, 0);

transform: translate3d(0, -100%, 0);

top: 0;

}

.carousel.vertical .carousel-inner > .item.next.left,

.carousel.vertical .carousel-inner > .item.prev.right,

.carousel.vertical .carousel-inner > .item.active {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

top: 0;

}

}

.carousel.vertical .carousel-inner > .active,

.carousel.vertical .carousel-inner > .next,

.carousel.vertical .carousel-inner > .prev {

display: block;

}

.carousel.vertical .carousel-inner > .active {

top: 0;

}

.carousel.vertical .carousel-inner > .next,

.carousel.vertical .carousel-inner > .prev {

position: absolute;

top: 0;

width: 100%;

}

.carousel.vertical .carousel-inner > .next {

top: 100%;

}

.carousel.vertical .carousel-inner > .prev {

top: -100%;

}

.carousel.vertical .carousel-inner > .next.left,

.carousel.vertical .carousel-inner > .prev.right {

top: 0;

}

.carousel.vertical .carousel-inner > .active.left {

top: -100%;

}

.carousel.vertical .carousel-inner > .active.right {

top: 100%;

}

.carousel.vertical .carousel-control {

left: auto;

width: 50px;

}

.carousel.vertical .carousel-control.up {

top: 0;

right: 0;

bottom: 50%;

}

.carousel.vertical .carousel-control.down {

top: 50%;

right: 0;

bottom: 0;

}

.carousel.vertical .carousel-control .icon-prev,

.carousel.vertical .carousel-control .icon-next,

.carousel.vertical .carousel-control .glyphicon-chevron-up,

.carousel.vertical .carousel-control .glyphicon-chevron-down {

position: absolute;

top: 50%;

z-index: 5;

display: inline-block;

}

.carousel.vertical .carousel-control .icon-prev,

.carousel.vertical .carousel-control .glyphicon-chevron-up {

left: 50%;

margin-left: -10px;

top: 50%;

margin-top: -10px;

}

.carousel.vertical .carousel-control .icon-next,

.carousel.vertical .carousel-control .glyphicon-chevron-down {

left: 50%;

margin-left: -10px;

top: 50%;

margin-top: -10px;

}

.carousel.vertical .carousel-control .icon-up,

.carousel.vertical .carousel-control .icon-down {

width: 20px;

height: 20px;

line-height: 1;

font-family: serif;

}

.carousel.vertical .carousel-control .icon-prev:before {

content: '/2039';

}

.carousel.vertical .carousel-control .icon-next:before {

content: '/203a';

}

原作者：jQuery之家

本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载，仅供网友学习和交流，如果我们的工作有侵犯到您的权益，请及时联系站长QQ：2601929995，我们会在第一时间进行处理！

投稿： admin@html5cn.org