- ベストアンサー
色の範囲が変わるjs
参考サイト：http://3rd.west-lock.co.jp/ 参考サイトの左ナビ、マウスオーバー時の背景ような動きを実装させるにはどのようにすればよろしいでしょうか。 簡単に実装できるjsなど公開されていますでしょうか。 ご回答よろしくお願いいたします。
- yyyyyyyy8
- お礼率35% (17/48)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… 基本的な考え方として、参考サイトの黒バック部分に相当する要素を用意しておいて、マウスオーバー/アウト時にその要素の幅をアニメーションで増/減するといった方法で実現可能かと思います。 ご提示のサイトで、表示している状態の要素構成を確認してみればわかりますが、<span class="ja">となっている要素がこれに該当するかと思います。 あるいは、CSS3でよければ、Transition やAnimation があるみたいですので、CSSだけでも実現できそうな気がします。 ご提示のサイトのものは結構複雑な構成になっているみたいですが、要領だけにしてみるとこんな感じでしょうか。 アニメーションは、幅を変えるのではなくoverflow:hiddenの親要素の中でスライドさせる方法にしています。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #navi, #navi li { list-style-type:none; margin:0; padding:0; } #navi { border-top:1px solid #888; border-bottom:1px solid #eee; } #navi li { width:150px; border-bottom:1px solid #888; border-top:1px solid #eee; position:relative; overflow:hidden; } #navi li a { display:block; text-decoration:none; color:#000; font-weight:bold; position:relative; padding:10px; } #navi li a:hover { color:#fff; } #navi li .backgroundMask { position:absolute; background-color:#333; } //--> </style> </head> <body> <div style="width:150px; height:400px; background-color:#ebecef;"> <div style="padding:50px 10px;"> test sample </div> <ul id="navi"> <li> <a href="#">test1</a> </li> <li> <a href="#">test2</a> </li> <li> <a href="#">test3</a> </li> <li> <a href="#">test4</a> </li> </ul> </div> <script type="text/javascript"> <!-- (function(){ var stock = []; // ***** mask slide animator ***** var slide = function(e, dir){ clearInterval(e.animate); var m = e.mask, left = parseInt(m.style.left); var end = dir>0?0:-parseInt(m.clientWidth); e.animate = setInterval(function(){ left += dir * 8; if((dir>0 && left>end) || (0>dir && end>left)) left = end; m.style.left = left + "px"; if(left == end){ clearInterval(e.animate); e.animate = null; } }, 10); } /*@cc_on@*/ // ***** event handler ***** var handler = function(evt){ var t = evt./*@if(1)srcElement @else@*/target /*@end@*/; var p = t.parentNode, e, i; if(t.nodeName != "A" || !p || !p.parentNode || p.parentNode.id != "navi") return; t = evt.type; if(t != "mouseover" && t != "mouseout") return; for(i=0; e=stock[i++];) if(e.element == p) break; if(e) slide(e, t=="mouseout"?-1:1); } var addEvent = function(type, func){ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ type, func, false); } // ***** initialize ***** var elm = document.getElementById("navi").getElementsByTagName("li"); var e, m, i = 0, mask = document.createElement("div"); mask.className = "backgroundMask"; while(e = elm[i++]){ m = mask.cloneNode(true); m.style.width = e.clientWidth + "px"; m.style.height = e.clientHeight + "px"; m.style.left = "-" + m.style.width; e.insertBefore(m, e.firstChild); stock.push({element:e, animate:null, mask:m}); } addEvent("mouseover", handler); addEvent("mouseout", handler); })(); //--> </script> </body> </html>
