css/sly.css

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

.slyWrap .controls{margin:20px 0 ;}

.controls{text-align:center;}

.sly{overflow:hidden;}
.sly > ul{list-style:none;margin:0;padding:0;}
.sly > ul li{position:relative;margin:0;padding:0;background:#4DBCE9;color:#fff;text-align:center;cursor:pointer;}
.sly > ul li.active{background:#fff;color:#4DBCE9;
	-webkit-box-shadow:inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	-moz-box-shadow:inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	-o-box-shadow:inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	box-shadow:inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
}

.pages{list-style:none;margin:20px 0;padding:0;text-align:center;}
.pages li{display:inline-block;width:11px;height:11px;margin:0 2px;text-indent:-999px;background:#fff;border-radius:10px;cursor:pointer;
	overflow:hidden;border:1px solid #aaa;
}
.pages li:hover{background:#eee;}
.pages li.active{background:#999;border-color:#888;box-shadow:inset 0 0 0 2px #eee;}

.scrollbar{background:#808080;border-radius:4px;border:2px solid #808080;border-top-color:#666;line-height:0;}
.scrollbar .handle{border-radius:4px;background:#fff;cursor:pointer;line-height:0;
	-webkit-box-shadow:0 1px 0 #555;
	-moz-box-shadow:0 1px 0 #555;
	-o-box-shadow:0 1px 0 #555;
	box-shadow:0 1px 0 #555;
}

#vertical .slyWrap{margin:30px 0;width:100%;float:left;}

#vertical .scrollbar{width:5px;}
#vertical .example1 .scrollbar .handle{height:100px;width:100%; border:0; background:url(http://www.tubaobao.com/images/handle3.jpg) repeat-y; box-shadow:none; border-radius:0;}
#vertical .example1{position:relative; width:668px; margin:0;}
#vertical .example1 .sly{width:625px;height:228px;}
#vertical .example1 .scrollbar{position:absolute;top:0;right:0px;height:228px; width:32px; border:0; background:url(http://www.tubaobao.com/images/scrollbarbg.jpg) no-repeat; background-color:inherit;}

#vertical .example11{width:415px;}
#vertical .example11 .sly{width:380px;height:228px;}

#vertical .example2{position:relative;}
#vertical .example2 .sly{width:100%;height:680px;}
#vertical .example2 .scrollbar{position:absolute;top:0;left:10px;height:500px;}

/* Buttons */
.btn{display:inline-block;padding:5px 10px 5px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-decoration:none;
	vertical-align:middle;background-color:#f5f5f5;text-shadow:-1px -1px 0 rgba(255, 255, 255, 0.75);
	background-image:-moz-linear-gradient(top, #fff, #e6e6e6);
	background-image:-ms-linear-gradient(top, #fff, #e6e6e6);
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
	background-image:-webkit-linear-gradient(top, #fff, #e6e6e6);
	background-image:-o-linear-gradient(top, #fff, #e6e6e6);
	background-image:linear-gradient(top, #fff, #e6e6e6);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#333', GradientType=0);
	border:1px solid;
	border-color:#333 #333 #bfbfbf;
	border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.3);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
	-webkit-border-radius:2px;