数据滚动显示:
调用插件countUp.js
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
/**数据滚动显示**/
var demo1 = new CountUp('myTargetElement1', 0, 12, 0, 2.5, options);
if (!demo1.error) {
demo1.start();
}
模块加载:(根据当前div元素通过鼠标滚轮是否滑动到当前位置而执行的操作):
$(function () {
//当滚动到demo3位置时 重新加载demo3的js
$(window).scroll(function(){
// 获得div的高度
var h = $("#demo3").offset().top;
//.offset().top 为当前元素离顶部的距离;
if($(this).scrollTop() > h-300 && $(this).scrollTop() < h-280){
//scrollTop()函数为鼠标滑轮离顶部的距离
// 滚动到指定位置
$("#demo3").show();
}
});
}
模块加载与其他js特效 联合使用效果较好。
公告滚动显示:
$(function () {
// 调用 公告滚动函数
setInterval("noticeUp('.notice ul','-35px',1500)", 200);
}
/*
* 参数说明
* obj : 动画的节点,本例中是ul
* top : 动画的高度,本例中是-35px;注意向上滚动是负数
* time : 动画的速度,即完成动画所用时间,本例中是500毫秒,即marginTop从0到-35px耗时500毫秒
* function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后;
*
*/
function noticeUp(obj,top,time) {
$(obj).animate({
marginTop: top
}, time, function () {
$(this).css({marginTop:"0"}).find(":first").appendTo(this);
})
}