初心者のため、説明が足りないこともあるかと思いますが、どうぞご教示ください。
目標は下記のサイトの横並び画像のように、画像にマウスオーバーすると、画像が要素内で拡大し、マウスについてくるようなエフェクトにしたいです。
http://www.allt.sk/
様々なサイト様が公開している記述を拝見し、どうにかテストの状態までたどり着きましたが、
下記2点どうしてもわかりません。
1)マウスアウト時の挙動がスムーズにならない
2)テキストにhoverした時に、画像拡大・マウス追従しなくなる
▼テスト
http://sample01.studio-goblin.com/
▼参考させていただいたサイト
http://memocarilog.info/jquery/5745
アドバイスいただければ幸いです。
お導きのほど、よろしくお願いします。
(当方、jsは全く初心者です)
html
1<div id="hogeHoge01" class="hogeHoge"><div id="homPanel01" class="homPanelIndex"><a href="/experience/index.html"><p><img src="assets/img/FS021_L.jpg"></p><span>テキストテキストテキスト</span></a></div></div> 2
css
1.hogeHoge { 2text-align: center; 3position: relative; 4z-index: 2; 5color: #333; 6outline: none; 7overflow: hidden; 8} 9.hogeHoge a { 10 width: 100%; 11 display: block; 12 text-align: center; 13 position: absolute; 14 color: #333; 15 font-weight: bold; 16 outline: none; 17} 18.hogeHoge:hover a, 19.hogeHoge a:hover { 20 color: #000; 21 text-decoration: none; 22 opacity: 1 !important; 23} 24 25.hogeHoge::before, 26.hogeHoge::after { 27 position: absolute; 28 z-index: -1; 29 display: block; 30 content: ''; 31} 32.hogeHoge, 33.hogeHoge::before, 34.hogeHoge::after { 35 -webkit-box-sizing: border-box; 36 -moz-box-sizing: border-box; 37 box-sizing: border-box; 38 -webkit-transition: all .5s; 39 transition: all .5s; 40} 41.hogeHoge:hover, 42.homPanelIndex a:hover, 43.homPanelIndex a img:hover { 44 color: #000; 45 opacity: 1 !important; 46} 47.hogeHoge::after { 48 top: 0; 49 left: -100%; 50 width: 100%; 51 height: 100%; 52} 53.hogeHoge:hover::after { 54 top:0; 55 left: 0; 56 background: #fff; 57} 58 59.homPanelIndex{ 60 position: relative; 61 overflow: hidden; 62} 63.homPanelIndex p { 64 position: absolute; 65 top: -15px; 66 left: -40px; 67} 68.homPanelIndex p img { 69 height: 140%; 70 width: auto; 71 position: absolute; 72 z-index: 444; 73 left: -20px; 74 top: -20px; 75 -moz-transition: -moz-transform 0.5s linear; 76 -webkit-transition: -webkit-transform 0.5s linear; 77 -o-transition: -o-transform 0.5s linear; 78 -ms-transition: -ms-transform 0.5s linear; 79 transition: transform 0.5s linear; 80} 81.homPanelIndex p:hover img { 82 -webkit-transform: scale(1.1); 83 -moz-transform: scale(1.1); 84 -o-transform: scale(1.1); 85 -ms-transform: scale(1.1); 86 transform: scale(1.1); 87 transition: all .5s; 88 -webkit-transition: all .5s; 89} 90.homPanelIndex span { 91 position: relative; 92 z-index: 555; 93}
javaScript
1$(function(){ 2var thisObj = $('#homPanel01'); 3if (thisObj.length == 0) return false; 4 var item = thisObj[0]; 5 var liWidth = $(' a > p', item).width() 6 var liHeight = $('a > p', item).height() 7 var ulWidth = thisObj.width(); 8 var ulHeight = thisObj.height(); 9 var offset_x = liWidth - ulWidth; 10 var offset_y = liHeight - ulHeight; 11 var itemLi = thisObj.find('p'); 12thisObj.mousemove(function(e){ 13 var cursorX = e.clientX - thisObj.offset().left; 14 (cursorX > ulWidth) ? cursorX = ulWidth : cursorX ; 15 var centerX = (cursorX / ulWidth * offset_x) - offset_x / 2 ; 16 var cursorY = e.clientY - thisObj.offset().top + $('html').scrollTop(); 17 (cursorY > ulHeight) ? cursorY = ulHeight : cursorY ; 18 var centerY = (cursorY / ulHeight * offset_y) - offset_y / 2; 19 // li要素を移動させるループ ======== 20for (var i=1; i<= itemLi.length; i++){ 21 var liLeft = parseFloat($(itemLi[i-1]).css('left')); 22 var newLeft = centerX * (i / itemLi.length) - offset_x / 2; 23 $(itemLi[i-1]).css('left', (newLeft + liLeft*5) / 10); 24 25// Y方向の移動処理 26 var liTop = parseFloat($(itemLi[i-1]).css('top')); 27 var newTop = centerY * (i / itemLi.length) - offset_y / 2; 28 $(itemLi[i-1]).css('top', (newTop + liTop*5) / 10); 29 } 30 }); 31 $("#homPanel01").mouseout(function(){ 32 $("#homPanel01 a > p").css('left','-' + 15 + 'px').css('top', '-' + 10 + 'px'); 33 }); 34 }); 35});
良い方法がありましたらご教示いただきたく思います。
どうぞよろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/14 22:42
2016/07/14 22:47
2016/07/14 23:08
2016/07/14 23:47
2016/07/15 01:03
2016/07/15 14:29