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侧边栏插件-Simpler Sidebar 插件应用
2017-12-25
-
轴动效果插件,类似Github404页面 插件应用
2018-10-31
-
jQuery响应式图片画廊插件S Gallery 插件应用
2017-12-12
-
jQuery幻灯片插件-Smoothslides 插件应用
2017-6-26
-
粒子插件particles.js的用法 插件应用
2017-12-12
-
jQuery侧边导航插件SidebarJS 插件应用
2017-12-12
-
移动端常用alert、confirm、toast等弹窗插件,兼容 jQueryZepto 插件应用
2017-12-10
-
轮播图FlexSlider插件使用方法及参数 插件应用
2017-6-3
-
移动端日期选择组件 插件应用
2017-6-23
-
支持移动触摸的jQuery图片Lightbox插件 插件应用
2017-5-20