【网站】数字滚动效果的实现方法

代码如下：

HTML部分：

<div class="box Counter"><ul class="clearfix"><li><h2><span class="count">5000</span>㎡</h2><p>独立园区，标准化厂房</p><div class="line"></div></li><li><h2><span class="count">4000</span>㎡</h2><p>办公区域，拥有高端实验室</p><div class="line"></div></li></ul>
</div>

JS部分：

<script>//数字滚动效果var flag = 1;$(window).scroll(function() {// 滚动条距离顶部的距离 大于 3800px时if($(window).scrollTop() >= 3800 && flag == 1) {$('.count').each(function() {(function rec(self, cnt) {$(self).prop('Counter', 0).animate({Counter: cnt}, {duration: 1000,easing: 'swing',step: function(now) {$(self).text(Math.ceil(now));},complete: function() {}});}(this, $(this).text()));});flag = 2;}});
</script>

个人总结：此处踩坑的原因在于js的判断上。

在宏鑫源网站上因为首页是滚屏的形式，所以出现数字滚动效果时，判断的是当前是哪一屏幕。

而在之前的字体公益站上，首页的正常的滚动条形式，所以出现数字滚动效果时，判断的是滚动条距离顶部的高度。

【网站】数字滚动效果的实现方法相关推荐

html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
jquery实现数字滚动效果
因为需要,自己用jquery动手写了数字滚动效果实现原理 1.先确定数字最大的位数,比如说最大数为6位数,就画出一排6个高度为30px的方格; 2.然后在每个方格区域增加一竖排的 012345678 ...
vue 固定div 滚动_vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ r ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
jQuery数字滚动效果
jQuery数字滚动效果## 引入jQuery <script src="js/jquery.min.js"></script> body <div ...
CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...

【网站】数字滚动效果的实现方法

【网站】数字滚动效果的实现方法相关推荐

最新文章

热门文章