【コピペで実装】制作でよく使うJS(jQuery)とプラグイン一覧

Webサイトでこれは絶対使うよねーとか使用頻度高めのコードとプラグインをまとめました。
より使いやすいものや冷えた際には随時更新していきます。

コピペで簡単に実装できる!制作でよく使うJS(jQuery)一覧

では早速いってみよう!

リンク移動系

スムーススクロール

ページ内リンクとかでするするーって移動するやつ。

$('a[href^="#"]').click(function () {
var speed = 500;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({
scrollTop: position
}, speed, "swing");
return false;
});

画像操作

画像切り替え

横幅によっての画像切り替え。
SPようの画像を「○○_sp」、PCを「○○_pc」として、「imgタグ」に「sp_img」とclass指定することでブレイクポイントで画像を切り替えることができます。

var $elem = $('.sp_img');
var sp = '_sp.';
var pc = '_pc.';
var replaceWidth = 640; //ブレイクポイント

function imageSwitch() {
var windowWidth = parseInt($(window).width());
$elem.each(function () {
var $this = $(this);
if (windowWidth >= replaceWidth) {
$this.attr('src', $this.attr('src').replace(sp, pc));
} else {
$this.attr('src', $this.attr('src').replace(pc, sp));
}
});
}
imageSwitch();

var delayStart;
var delayTime = 200; //ミリSec
$(window).on('resize', function () {
clearTimeout(delayStart);
delayStart = setTimeout(function () {
imageSwitch();
}, delayTime);
});

プラグイン

住所入力

今時登録画面やフォームで自動で住所が入らないのはどうなのよと言うことで「ajaxzip3.js」。
郵便番号だけで自動で住所を入力してくれます。

「#zip-btn」とIDを降ったボタンを押したとき、「address」に自動入力する。

$('#zip-btn').on('click', function(){
AjaxZip3.zip2addr('zip','','address','address');

//成功時の処理
AjaxZip3.onSuccess = function() {
$('.address').focus();
};

//失敗時の処理
AjaxZip3.onFailure = function() {
alert('郵便番号に該当する住所が見つかりません');
};
return false;
});

コメント

タイトルとURLをコピーしました