jQuery内容滚动插件-BoxSlider
简介
BoxSlider 是一款小巧的 jQuery 内容滚动/滑动插件,当鼠标悬停在箭头上,内容就会按照相应的方向滚动。你可以用于大篇幅文字(小说)或图片展示。
在线演示及下载
使用方法
引入文件
HTML
CSS
.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 #674172; } .box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #674172; } .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: #aea8d3; 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
$(function() { $('#dowebok').boxSlider({ orientation: 'vertical', }); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
orientation(必须) | 字符串 | false | 滚动方向,可选 vertical(垂直/上下)或 horizontal(水平/左右) |
speed | 整数 | 1 | 滚动速度,越大越快 |
added | 函数 | 空 | 初始化后的回调函数 |
相关推荐
-
jQuery Jcrop 图像裁剪 插件应用
2017-6-23
-
JS时间处理插件MomentJS 插件应用
2017-12-18
-
ScrollReveal-元素随页面滚动产生动画的js插件 插件应用
2017-6-3
-
jQuery artDialog对话框插件API 插件应用
2017-6-23
-
移动端常用alert、confirm、toast等弹窗插件,兼容 jQueryZepto 插件应用
2017-12-10
-
省市区三级菜单联动插件 插件应用
2018-1-1
-
jQuery旋转插件jqueryrotate 插件应用
2017-12-12
-
jQuery全屏滚动插件-pagepiling.js 插件应用
2017-12-25
-
FullPage.js全屏插件文档及使用方法 插件应用
2017-6-27
-
BetterScroll:可能是目前最好用的移动端滚动插件 插件应用
2017-12-10