滚动示例
滚动属性动画实例
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo - 滚动属性动画实例</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<style>
body{
background: #fff;
}
.ks-button {
display: inline-block;
*display: inline;
*zoom:1;
margin: 2px;
font-family: Arial, sans-serif;
color: #000;
/* Client apps may override the URL at which they serve the image. */
background: #ddd url(assets/button-bg.png) repeat-x top left;
text-decoration: none;
list-style: none;
vertical-align: middle;
cursor: default;
outline: none;
border-radius: 2px;
border-style: solid;
border-color: #aaa;
border-width: 1px;
/* By default in FF2, block elements inside a moz-inline-box are stacked
* horizontally next to each other. This stops that weird behavior. */
-moz-box-orient: vertical;
padding: 3px 4px;
white-space: nowrap; /* Prevents buttons from line breaking on android. */
}
/* State: disabled. */
.ks-button-disabled {
background-image: none !important;
opacity: 0.3;
cursor: default !important;
-moz-opacity: 0.3;
filter: alpha(opacity = 30);
color: #333 !important;
border-color: #999 !important;
}
/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .ks-button-disabled {
margin: 2px 1px !important;
padding: 0 1px !important;
}
/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .ks-button-disabled {
margin: 2px 1px !important;
padding: 0 1px !important;
}
/* State: hover. */
.ks-button-hover {
border-color: #9cf #69e #69e #7af !important; /* Hover border wins. */
}
/* State: active, checked. */
.ks-button-active,
.ks-button-checked {
background-color: #bbb;
background-position: bottom left;
}
/* State: focused. */
.ks-button-focused {
border-color: orange;
}
.ks-button-collapse-left {
margin-left: 0 !important;
border-radius: 0 2px 2px 0;
border-left: none;
}
.ks-button-collapse-right {
border-right: none !important;
border-radius: 2px 0 0 2px;
margin-right: 0 !important;
}
.box {
width:100px;
margin:20px;
overflow:hidden;
border: 5px solid #AABBCC;
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<div id="test8" class="box">
<div style="width:500px;">
1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,
6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,
3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,
0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,
6,7,8,9,0,1,2,3,4,5
,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,
3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,
</div>
</div>
<script type="text/javascript">
require(['anim/timer', 'button'], function(TimerAnim, Button){
var b = new Button({
content : 'run scroll animation'
});
b.render();
b.on('click', function(){
b.set("disabled", true);
TimerAnim('#test8',{
scrollLeft : 500
},{
duration : 5,
complete : function(){
Anim('#test8',{
scrollLeft : 0
},{
duration : 5,
complete : function(){
b.set("disabled", false);
}
}).run();
}
}).run();
})
})
</script>
</body>
</html>