首先為了截出gif圖，我下載了一個小工具
GifCam： https://www.appinn.com/gifcam/
隨著頁面滾動，數字自動增大的jquery特效
主要就是依賴這個腳本script.js
// JavaScript Document $.fn.countTo = function (options) { options = options || {}; return $(this).each(function () { // set options for current element var settings = $.extend({}, $.fn.countTo.defaults, { from: $(this).data('from'), to: $(this).data('to'), speed: $(this).data('speed'), refreshInterval: $(this).data('refresh-interval'), decimals: $(this).data('decimals') }, options); // how many times to update the value, and how much to increment the value on each update var loops = Math.ceil(settings.speed / settings.refreshInterval), increment = (settings.to - settings.from) / loops; // references & variables that will change with each update var self = this, $self = $(this), loopCount = 0, value = settings.from, data = $self.data('countTo') || {}; $self.data('countTo', data); // if an existing interval can be found, clear it first if (data.interval) { clearInterval(data.interval); } data.interval = setInterval(updateTimer, settings.refreshInterval); // initialize the element with the starting value render(value); function updateTimer() { value += increment; loopCount++; render(value); if (typeof(settings.onUpdate) == 'function') { settings.onUpdate.call(self, value); } if (loopCount >= loops) { // remove the interval $self.removeData('countTo'); clearInterval(data.interval); value = settings.to; if (typeof(settings.onComplete) == 'function') { settings.onComplete.call(self, value); } } } function render(value) { var formattedValue =https://www.cnblogs.com/chenyingying0/p/ settings.formatter.call(self, value, settings); $self.html(formattedValue); } }); }; $.fn.countTo.defaults = { from: 0, // the number the element should start at to: 0, // the number the element should end at speed: 1000, // how long it should take to count between the target numbers refreshInterval: 100, // how often the element should be updated decimals: 0, // the number of decimal places to show formatter: formatter, // handler for formatting the value before rendering onUpdate: null, // callback method for every time the element is updated onComplete: null // callback method for when the element finishes updating }; function formatter(value, settings) { return value.toFixed(settings.decimals); } // custom formatting example $('#count-number').data('countToOptions', { formatter: function (value, options) { return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); } }); function count1(options) { document.getElementById('dt').style.display = "block"; //鎺у埗鐩掑瓙鏄劇ず } function count(options) { var $this = $(this); options = $.extend({}, options || {}, $this.data('countToOptions') || {}); $this.countTo(options); }
使用時首先在頁面引入jquery.js和script.js
給要影片的元素添加 timer 類，data-to 表示最終到達的數字， data-speed 表示影片速度
<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>
呼叫時的腳本
<script type="text/javascript"> $('.timer').each(count) $('.timer').each(count1); </script>
接下來是完整的頁面
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h2 class="timer" data-to="1000" data-speed="4000">1000</h2> <script type="text/javascript"> $('.timer').each(count) $('.timer').each(count1); </script> </body> </html>
當然我這個比較丑，找了個好看的demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <style> @charset "utf-8"; /* CSS Document */ /*時間人數開始*/ .time{ width:100%; height:298px; float:left; background:url(images/timebg.png) no-repeat center; background-size:cover;} .time_content{ width:1200px; height:298px; margin:0 auto;} .time_left{ width:40%; max-width:480px; float:left; height:298px;} .time_left h1{ width:100%; float:left; height:24px; line-height:24px; font-size:22px; text-align:center; color:#FFF; font-weight:400; margin-top:96px;} .time_left h2{ width:100%; float:left; height:56px; line-height:56px; font-size:54px; text-align:center; color:#FFF; margin-top:12px; font-weight:bold;} .time_right{ width:60%; max-width:720px; height:298px; float:left;} .wrapper { width: 630px; height:90px; float:left; margin-left:100px; margin-top:110px; display:none;} .wrapper1{ width:200px; float:left; height:90px;} .wrapper2{ width:200px; float:left; height:90px; margin-left:20px; border-right:1px solid #FFF; border-left:1px solid #FFF;} .wrapper3{ width:200px; float:left; height:90px;} .counter { color:#ffe400; border-radius: 5px;} .time1{ width:100px; height:54px; float:left;} .time1 h1{ float:left;} .time1 h2{ float:left;} .time2{ width:70px; height:54px; float:left; margin-left:50px;} .time3{ width:100px; height:54px; float:left; text-align:center;margin-left:40px;} .timex{ width:50px; height:30px; margin-top:24px;color:#FFF; float:left;} .timey{ width:200px; float:left; color:#FFF;} .wrapper2 .timey{ width:148px; margin-left:52px; float:left;} .wrapper3 .timey{ width:152px; margin-left:48px; float:left;} .count-title { font-weight: normal; text-align: center; } .count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } /*時間人數結束*/ </style> </head> <body> <div class="time"> <div class="time_content"> <div class="time_left"> <h1>真實資料 放心選擇</h1> <h2>專注學歷教育15年</h2> </div> <div class="time_right"> <div class="wrapper" id="dt"> <div class="wrapper1"> <div class="counter col_fourth time1"> <h2 class="timer count-title" data-to="300000" data-speed="2000">300000</h2> </div> <div class="timex">以上</div> <div class="timey">付費學員</div> </div> <div class="wrapper2"> <div class="counter col_fourth time2"> <h2 class="timer count-title" data-to="107" data-speed="2000">107</h2> </div> <div class="timex">家</div> <div class="timey">地區分部</div> </div> <div class="wrapper3"> <div class="counter col_fourth time3"> <h2 class="timer count-title" data-to="1000" data-speed="2000">1000</h2> </div> <div class="timex">多人</div> <div class="timey">教研團隊</div> </div> </div> <script type="text/javascript"> $('.timer').each(count) $('.timer').each(count1); </script> </div> </div> </div> <script type="text/javascript"> $('.timer').each(count) $('.timer').each(count1); </script> </body> </html>
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7161.html
標籤：jQuery
下一篇：一個關于企業資訊化技術落地的問題