マウスオンで画像の拡大。

2014年8月14日（木）

天気　曇ときどき雨

奥様の実家へ。

マウスオンで画像の拡大。

ようやくアップしました。

そのページ→エコカラット「玄関エントランス」　です。

参考にしたサイト

マウスオンで画像の拡大→

１，jQueryで画像ロールオーバー時にその場でシンプルに拡大表示するイメージビューアーのスクリプトサンプル | BlackFlag

そして写真の回りに影を付けるのは→

２，CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジン

特に1のサイトには大変お世話になりました。

基本形ではなく多少のアレンジもしたのでコメント欄も読み、手直しをして設置しました。

忘れないように書き出します。

マウスオンで画像の拡大

ページ上部

ーーーーーーーーーーーーーーーーーーーーーー

$(".magnify").each(function(){
$(this).css({width:(thumbSize)});
});

var objWidth = $('.magnify').width();
var objHeight = $('.magnify').height();

$(".magnify").each(function(){
$(this).wrapAll('<span class="magnify_cover"></span>');
$(this).parent('.magnify_cover').css({
margin: '0 10px 10px 0',
width: (objWidth),
height: (objHeight),
float: 'left',
position: 'relative'
});
});

$(".magnify").hover(function(){
$(this).css({top:'0',left:'0',position: 'absolute',zIndex:'99'});　（「99」は重なり順位）
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass('shadow');
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
$(this).css({top:'',left:'',position: 'relative',zIndex:'1'});　（「1」は重なり順位）
$(this).removeClass('shadow');
});
});

});
});（３行目の閉じる部分）
</script>

※赤字の部分はここでのメモ書きです。

ーーーーーーーーーーーーーーーーーーーーーー

本文

class指定をするだけ。

画像は一つ用意すればOK。

スクリプトには様々な数字があり、いじると色々変えられると思いますがほとんどいじっておりません。

通常時に画像の回りに影

ページ上部　CSSのところ

ーーーーーーーーーーーーーーーーーーーーーー

.img {width:160px;

　 float: left;
display:inline-block;
box-shadow: 5px 0px 20px -5px rgba(0, 0, 0, 0.8);
align: center;
font-size:12;}