插件描述：BoxSlider 是一款小巧的 jQuery 内容滚动滑动插件，当鼠标悬停在箭头上，内容就会按照相应的方向滚动。你可以用于大篇幅文字（小说）或图片展示。
使用方法
引入文件
1 2 | <script src="js/jquery.min.js"></script><script src="js/jquery-boxSlider.js"></script> |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="box-slider" id="jqhtml"> <a href="#" class="box-slider-seta-up"></a> <div class="box-slider-content"> <div class="box-slider-move"> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item last-item"><span></span></div> </div> </div> <a href="#" class="box-slider-seta-down"></a></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 | .box-slider { width: 900px; margin: 0 auto;}.box-slider .box-slider-seta-up { display: block; height: 30px; margin: 0 5px; background: url(img/seta-up.png) no-repeat center center #dedede;}.box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #dedede;} .box-slider-seta-up:hover,.box-slider-seta-down:hover{background-color: #2E2E2E} .box-slider .box-slider-content { height: 420px; margin: 10px 0; overflow: hidden;}.box-slider .box-slider-move { position: relative; top: 0; left: 0;}.box-slider .item { float: left; width: 33.3%;}.box-slider .item span { display: block; height: 200px; background-color: #292929; margin: 5px 5px;}.box-slider .last-item span { background-color: red; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #fff;}.box-slider-move { overflow: hidden; *zoom:1;} |
样式可以根据自身需要任意编写，需要注意的是 .box-slider-move 一定要清除浮动。
JavaScript
1 2 3 4 5 | $(function() { $('#jqhtml').boxSlider({ orientation: 'vertical', });}); |
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| orientation(必须) | 字符串 | false | 滚动方向，可选 vertical（垂直/上下）或 horizontal（水平/左右） |
| speed | 整数 | 1 | 滚动速度，越大越快 |
| added | 函数 | 空 | 初始化后的回调函数 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery模拟select下拉框插件SelectBox
- 下一个特效： jQuery html5自定义视频控件