滚动
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
4.16.1 上下滚动
- 第一条数据
- 第二条数据
- 第三条数据
HTML
SCSS
CSS
JS
<div id="marquee" class="hui-marquee"> <div id="holder"> <ul> <li>第一条数据</li> <li>第二条数据</li> <li>第三条数据</li> </ul> </div> </div>
.hui-marquee { height: 22px; overflow: hidden; line-height: 22px; }
.hui-marquee { height: 22px; overflow: hidden; line-height: 22px; }
$('#marquee').Huimarquee({ height: 22, speed: 3000, delay: 30 });
4.14.2 左右自动滚动,带控制
HTML
SCSS
CSS
JS
<div class="hui-rollpic clearfix"> <a href="javascript:void(0)" class="prev"></a> <div class="hui-rollpic-body"> <ul> <li><img width="170" height="143" title="" src="http://h-ui.net/temp/1.jpg"></li> <li><img width="170" height="143" title="" src="http://h-ui.net/temp/2.jpg"></li> <li><img width="170" height="143" title="" src="http://h-ui.net/temp/3.jpg"></li> <li><img width="170" height="143" title="" src="http://h-ui.net/temp/4.jpg"></li> <li><img width="170" height="143" title="" src="http://h-ui.net/temp/5.jpg"></li> </ul> </div> <a href="javascript:void(0)" class="next"></a> </div>
.hui-rollpic{ .prev, .next { display: block; height: 38px; width: 38px; cursor: pointer; float: left; background: url(../images/rollpic/unslider-arrow.png) no-repeat 0 0; margin-top: 70px; } .prev { background-position: 0 0; margin-right: 5px; &:hover { background-position: 0 -38px; } } .next { background-position: 0 -76px; margin-left: 5px; &:hover { background-position: 0 -114px; } } .hui-rollpic-body { float: left; border: solid 1px #ddd; li { padding: 10px; } } }
.hui-rollpic .prev, .hui-rollpic .next { display: block; height: 38px; width: 38px; cursor: pointer; float: left; background: url(../images/rollpic/unslider-arrow.png) no-repeat 0 0; margin-top: 70px; } .hui-rollpic .prev { background-position: 0 0; margin-right: 5px; } .hui-rollpic .prev:hover { background-position: 0 -38px; } .hui-rollpic .next { background-position: 0 -76px; margin-left: 5px; } .hui-rollpic .next:hover { background-position: 0 -114px; } .hui-rollpic .hui-rollpic-body { float: left; border: solid 1px #ddd; } .hui-rollpic .hui-rollpic-body li { padding: 10px; }
引入jQuery 和 jcarousellite
jcarousellite.js文件需要单独下载并引用,下载地址 /lib-h-ui-net/jcarousellite.min.js
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jcarousellite.min.js"></script>
调用代码:
$(function(){ $(".hui-rollpic .hui-rollpic-body").jCarouselLite({ auto: 2000, /*自动播放间隔时间*/ speed: 500, /*速度*/ btnNext:".next",/*向前滚动*/ btnPrev:".prev",/*向后滚动*/ visible:3 /*显示数量*/ })});
4.14.3 自动上下滚动,带控制
↑ 向上 ↓ 向下
HTML
CSS
JS
<div id="scrollDiv" style="width:300px;"> <div class="clearfix text-r"><span class="hui-btn up">↑ 向上</span> <span class="hui-btn down">↓ 向下</span></div> <div class="scrollText bk_gray pd-10 mt-10" style="height:170px;min-height:25px;overflow:hidden"> <ul style="margin-top: 0px;"> <li>此滚动功能灵活好用</li> <li><img src="//images.h-ui.net/www/2.png" width="300" height="150"><br>也可以是图片</li> <li>可以是文字</li> <li><img src="//images.h-ui.net/www/3.png" width="300" height="150"></li> <li><img src="//images.h-ui.net/www/1.png" width="300" height="150"></li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> <li>这是公告标题的九行</li> <li>这是公告标题的第十行</li> <li>这是公告标题的第十一行</li> <li>这是公告标题的第十二行</li> </ul> </div> </div>
.scrollText{height:170px;overflow:hidden}/*容器高度必须设置,而且溢出隐藏*/
引入jQuery 和 jquery.textSlider
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="lib/jquery.textSlider.js"></script>
调用代码:
$(function(){ $("#scrollDiv").textSlider({ line:2, /*一次滚动条数,跟li有关*/ speed:500, /*速度*/ timer:3000 /*间隔时间*/ }); });