gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

724bookmark

ベースでいつも使うjs

ロールオーバー(置換・フェード)

画像名_off.jpg画像名_on.jpgにフェード付でロールオーバー。

$(function() {
var targetImgs = $('img');
targetImgs.each(function() {
if(this.src.match('_off')) {
this.rollOverImg = new Image();
this.rollOverImg.src = this.getAttribute("src").replace("_off", "_on");
$(this.rollOverImg).css({position: 'absolute', opacity: 0});
$(this).before(this.rollOverImg);
$(this.rollOverImg).mousedown(function(){
$(this).stop().animate({opacity: 0}, {duration: 0, queue: false});
});
$(this.rollOverImg).hover(function(){
$(this).animate({opacity: 1}, {duration: 500, queue: false});
},
function(){
$(this).animate({opacity: 0}, {duration: 500, queue: false});
});
}
});
});

ロールオーバー(透過)

リンクありのimgタグに.alphaをつける。

$(function() {
var nav = $('.alpha');
nav.hover(
function(){
$(this).fadeTo(500,0.65);
},
function () {
$(this).fadeTo(500,1);
}
);
});

スムーススクロール


$(function(){
$('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;
});
});

ページトップ(スクロールで下から出現)


$(function() {
var showFlag = false;
var topBtn = $('#pagetop');
topBtn.css('bottom', '-100px');
var showFlag = false;
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '10px'}, 500);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 500);
}
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});

html


<p id="pagetop"><a href="#wrapper">pagetop</a></p>

css

#pagetop {
width: 30px;
height: 30px;
position: fixed;
right: 30px;
z-index: 1000;
}