<div class="codetitle"> <span><a style="CURSOR: pointer" data="70115" class="copybut" id="copybut70115" onclick="doCopy('code70115')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code70115"> <br> <br> <br> <br><style> <BR>body,html,div,ul,li,span,img,a{ <BR>margin:0; <BR>padding:0; <BR>} <BR>a{ <BR>text-decoration:none; <BR>color:#000; <BR>font-weight:bold; <BR>width:150px; <BR>display:inline-block; <BR>text-align:center; <BR>} <BR>li{ <BR>list-style:none; <BR>} <BR>img{ <BR>width:0; <BR>height:0; <BR>outline:none; <BR>} <BR>#tab{ <BR>margin:200px 0 0 300px; <BR>} <BR>#tab li{ <BR>float:left; <BR>width:150px; <BR>height:50px; <BR>line-height:50px; <BR>position:relative; <BR>margin-right:30px; <BR>} <BR>#tab img.map,#tab span.content{ <BR>position:absolute; <BR>} <BR>#tab span.content{ <BR>background:#333; <BR>color:#FFF; <BR>font-size:14px; <BR>text-align:center; <BR>height:0; <BR>} <BR>#tab img.map{ <BR>left:50%; <BR>bottom:0; <BR>} <BR></style> <br><title>JS下拉缓冲菜单_网页代码站()</title> <br> <br><br> <br><div id="tab"> <br><ul> <br><li style="background:url('/images/20130826/psb1.png')"> <br><a href="#">路飞</a> <br><img class="map lazy" src="/static/imghwm/default1.png" data-src="/jscss/demoimg/201210/psb1.jpg" alt="JS ドロップダウン バッファ メニューのサンプル コード_JavaScript スキル" > <br><span class="content">草帽海贼团船长,特征是头戴草帽,天性乐观、热情、善良、天真、单纯。</span> <br> </li> <br><li style="background:url('/images/20130826/psb1.png')"> <br><a href="#">索隆</a> <br><img class="map lazy" src="/static/imghwm/default1.png" data-src="/images/20130826/psb2.jpg" alt="JS ドロップダウン バッファ メニューのサンプル コード_JavaScript スキル" > <br><span class="content">草帽海贼团剑士,绿色头发,左耳戴三只黄色露珠耳环,绿色的肚兜,路痴。</span> <br> </li> <br><li style="background:url('/images/20130826/psb1.png')"> <br><a href="#">娜美</a> <br><img class="map lazy" src="/static/imghwm/default1.png" data-src="/jscss/demoimg/201210/psb3.jpg" alt="JS ドロップダウン バッファ メニューのサンプル コード_JavaScript スキル" > <br><span class="content">精通气象学和航海术,擅长偷术、骗术、谈判及威胁恐吓,头脑聪明又机灵。</span> <br> </li> <br><li style="background:url('/images/20130826/psb1.png')"> <br><a href="#">山治</a> <br><img class="map lazy" src="/static/imghwm/default1.png" data-src="/images/20130826/psb4.jpg" alt="JS ドロップダウン バッファ メニューのサンプル コード_JavaScript スキル" > <br><span class="content">草帽海贼团厨师,金发,有着卷曲眉毛,永远遮住半边脸的家伙,海贼中的绅士。</span> <br> </li> <br> </ul> <br> </div> <br><script type="text/javascript"> <BR>function kzxf_zoom(id) <BR>{ <BR>this.initialize.apply(this, argument) <BR>} <br><br>kzxf_zoom.prototype = <BR>{ <BR>initialize : function( ) <br><br>{ <br><br>var _this = this; <BR>this.wrapBox = document.getElementById('tab'); <BR>this.oLi = this.wrapBox.getElementsByTagName('li'); <BR>this.aImg = this.wrapBox.getElementsByTagName('img'); <BR>this.content = this.wrapBox.getElementsByTagName('span'); <BR>for(var i=0;i<this.oLi.length;i ) <BR>{ <BR>(function(i){ <BR>_this.oLi[i].onmouseover = function() <br><br>{ <BR>_this.jump(_this.aImg[i], _this.content[i]); <br><br>}; <BR>_this.oLi[i].onmouseout = function() <br><br>{ <BR>_this.hidden(_this.aImg[i], _this.content[i]) <br><br>})(i) <br><br>} <br><br>}, <br>jump : function(obj1, obj2) <br><BR>{ <br><br>var _this = this; <br>_this.animation(obj1, {高さ:130, 幅:160, marginLeft:-78, marginTop:-128},function(){ <br>_this.animation(obj1, {高さ:115, 幅:140 , marginLeft:-70, marginTop:-115}, function(){ <BR>_this.animation(obj1, {高さ:120, 幅:150, marginLeft:-75, marginTop:-120}) <BR>}) <BR>}); <BR>_this.animation(obj2, {高さ:200}); <BR>}, <BR>hidden : function(obj1, obj2) <BR>{ <BR>var _this = this; <BR>_this.animation(obj1, {幅:0, 高さ:0, marginLeft:0, marginTop:0}); <BR>_this.animation(obj2, {height:0}); <BR>}, <BR>アニメーション : function(obj, oAttr, fnCallBack) <BR>{ <BR>var _this = this; <BR>clearInterval(obj.timer); <BR>obj.timer = setInterval(function() <BR>{ <BR>var bStop = true; <BR>for(oAttr で適切) <BR>{ <BR><BR>var iCur = parseFloat(_this. css(obj, proper)); <br><br>proper == 'opacity' && (iCur = parseInt(iCur.toFixed(2) * 100)); <br><br>var iSpeed = (oAttr[proper] ] - iCur) / 5; <br><br>iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); <br><br>{ <br><br>bStop = false; <br><br>_this.css(obj, proper, iCur iSpeed) <br><br>} <br><br>if(bStop) <br><br>{ <br><br>clearInterval(obj.timer); <br><br>fnCallBack && fnCallBack.apply(_this, argument); 🎜>} <br><br>},20); <br><br>}, <br><br>css : function(obj, attr, value) <br><br>{ <br><br>if(arguments.length == 2) <br><br>{ <br><br>obj.currentStyle を返す ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr] <br><br>} <br><br>if(arguments.length == 3) <br><br>{ <br><br>switch(attr) <br><br>{ <br><br>ケース '幅' : <br><br>ケース '高さ' : <br><br>ケース '上' : <br><br>case 'bottom' : <br><br>case 'left' : <br><br>case 'marginLeft': <br><br>case 'marginTop': <br><br>obj.style[attr ] = 値 'px'; <br><br>休憩; <br><br>case 'opacity' : <br><br>obj.style.filter = 'alpha(opacity = ' value ' )'; <br><br>obj.style.opacity = 値 / 100; <br><br>休憩; <br><br>デフォルト: <br><br>obj.style[attr] = 値; <br><br>休憩; <br><br>} <br><br>} <br><br>} <br><br>}; <br>window.onload = function() <br>{ <br>new kzxf_zoom('tab') <br><br>}; <br><br></script> <br><br> <br>http://user.qzone.qq.com/1198772766 <br> <br> <br><br> </div>