gooodmark

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

516bookmark

ベースでいつも使う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;
}