常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
.box{width:300px;height:200px;overflow: auto;}
</style>
</head>
<body>
<div class="box">
大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国<b id="element1">sdasdas</b>大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国
</div>
<button id="btn">这是动画</button>
</body>
<script src="http://www.julian.com/research/js/libs/jquery-1.11.1.js"></script>
<script src="http://www.julian.com/research/velocity/build/velocity.min.js"></script>
<script>
!(function(win,doc,$){
//$.Velocity.mock = 7; 放缓整个动画的执行过程
$('#btn').on('click',function(){
$('#element1').velocity('scroll', {
container: $('.box'), //需要滚动的元素
duration: 1800, //完成的时间
delay: 500, //延迟
//queue: false, 设置一个新动画和当前动画并行运行
//loop : 1, //循环的次数，设置为true可以 无限循环
progress: function(elements, complete, remaining, start, tweenValue){
console.log((complete * 100) + "%");
console.log(remaining + "ms remaining!");
console.log("The current tween value is " + tweenValue)
}, //进度
begin: function(){
alert("动画我要开始了");
},//动画开始执行的函数
complete: function(){
alert("动画结束了");
}
})//.velocity("reverse"); //反转动画 reverse
setTimeout(function() {
// $('#element1').velocity("finish"); //提前调用动画结束方法，让动画提前结束
// $("#element1").velocity("stop"); //让动画暂停
}, 900);
})
})(window,document,jQuery)
</script>
</html>
2766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
