您的位置：首页 > 其它

垂直竖向，水平滚动插件插件

2016-02-24 20:14 337 查看 




<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery内容滚动/滑动插件BoxSlider演示-垂直/竖向_dowebok</title>
<style>
.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;}
</style>
</head>

<body>
<h1>垂直/竖向</h1>

<div class="box-slider" id="dowebok">
<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"><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>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-boxSlider.js"></script>
<script>
$(function() {
$('#dowebok').boxSlider({
orientation: 'vertical',
});
});
</script>

<!-- 以下信息与演示无关，可不必理会 -->
<style>
body { margin: 0; border-left: 200px solid #ccc;}

h1 { margin: 40px 0; font: 32px "Microsoft Yahei"; text-align: center;}

.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}

.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
</style>

<p class="vad">
<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
<a href="http://www.dowebok.com/183.html" target="_blank">说 明</a>
<a href="http://www.dowebok.com/183.html" target="_blank">下 载</a>
</p>

<div class="menu">
<a class="cur" href="index.html">1、垂直/竖向</a>
<a href="index2.html">2、水平/横向</a>
<a href="index3.html">3、回调函数</a>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航