$(document).ready(function () { var date = new Date(); var t = "" + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes(); $.getJSON("count.json?t=" + t, function (json) { var c = new CountUp("counter", 0, json.count); c.start(); }) });
上記のcustom.jsコードのcountに数が返ってくるのですが、
そこで条件分岐して、数が4万以上であれば、jqueryでindex.htmlのimageのsrcを変えたいのですが、さっぱり分かりません。
index.html
index.html
1<figure class="about-left-img"><img src="imgs/about-img-left.png" alt="about-img-left"></figure>
画像はpreload しておくことと、
display:none;で読み込んでおくことも必要なのですが、どこにコードを加えたらよいのかアドバイスいただけますと幸いです。
以下は、package.json
package.json
1{ 2 "name": "countup.js", 3 "description": "Animates a numerical value by counting to it", 4 "version": "1.9.3", 5 "license": "MIT", 6 "main": "./dist/countUp.min.js", 7 "repository": { 8 "type": "git", 9 "url": "git+https://github.com/inorganik/countUp.js.git" 10 }, 11 "dependencies": {}, 12 "devDependencies": { 13 "del": "~0.1.3", 14 "gulp": "~3.8.10", 15 "gulp-rename": "~1.2.0", 16 "gulp-uglify": "^1.4.2", 17 "gulp-wrap-umd": "~0.2.1" 18 }, 19 "scripts": { 20 "build": "gulp", 21 "clean": "gulp clean" 22 } 23} 24
countUp-jquery.js
(function($) { $.fn.countup = function(params) { // make sure dependency is present if (typeof CountUp !== 'function') { console.error('countUp.js is a required dependency of countUp-jquery.js.'); return; } var defaults = { startVal: 0, decimals: 0, duration: 2, }; if (typeof params === 'number') { defaults.endVal = params; } else if (typeof params === 'object') { $.extend(defaults, params); } else { console.error('countUp-jquery requires its argument to be either an object or number'); return; } this.each(function(i, elem) { var countUp = new CountUp(elem, defaults.startVal, defaults.endVal, defaults.decimals, defaults.duration, defaults.options); countUp.start(); }); return this; }; }(jQuery));
あなたの回答
tips
プレビュー