以下是 jQuery新闻竖直滚动切换特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery新闻竖直滚动切换特效</title>
<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg-demo">
<div class="container">
<div id="carousel-example-vertical" class="carousel vertical slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<p class="ticker-headline">
<a href="#">
<strong>Article Headline 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
</a>
</p>
</div>
<div class="item">
<p class="ticker-headline">
<a href="#">
<strong>Article Headline 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
</a>
</p>
</div>
<div class="item">
<p class="ticker-headline">
<a href="#">
<strong>Article Headline 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
</a>
</p>
</div>
<div class="item">
<p class="ticker-headline">
<a href="#">
<strong>Article Headline 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
</a>
</p>
</div>
<div class="item">
<p class="ticker-headline">
<a href="#">
<strong>Article Headline 5</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
</a>
</p>
</div>
</div>
<!-- Controls -->
<a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/bootstrap.min.js'></script>
</body>
</html>CSS代码(style.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';}
CSS代码(zzsc.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}
分享到QQ
分享到微博
微信扫一扫
