js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼
本文實(shí)例講述了js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
html代碼:
<div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">邁瑞寶</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">報(bào)價(jià):11.99-23.69萬(wàn)</a></li> <li><a href="#">車(chē)身結(jié)構(gòu):三箱</a></li> <li><a href="#">油耗:8.3-12.0L</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">索納塔8</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">報(bào)價(jià):13.39-22.59萬(wàn)</a></li> <li><a href="#">車(chē)身結(jié)構(gòu):三箱</a></li> <li><a href="#">油耗:9.0-12.0L</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">K5</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">報(bào)價(jià):10.88-25.58萬(wàn)</a></li> <li><a href="#">車(chē)身結(jié)構(gòu):三箱</a></li> <li><a href="#">油耗:8.4-13.0L</a></li> </ul> </li> </ul> </div>
css代碼:
ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1 { background-image: url('../img/bg1sub.png'); } ul.menu > li ul.sub2 { background-image: url('../img/bg2sub.png'); } ul.menu > li ul.sub3{ background-image:url(../img/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; } ul.menu > li ul.sub1 li{ display:block; }
js代碼:
if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8 var oldCurCSS = jQuery.curCSS; jQuery.curCSS = function (elem, name, force) { if (name === 'background-position') { name = 'backgroundPosition'; } if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) { return oldCurCSS.apply(this, arguments); } var style = elem.style; if (!force && style && style[name]) { return style[name]; } return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); }; } var oldAnim = $.fn.animate; $.fn.animate = function (prop) { if ('background-position' in prop) { prop.backgroundPosition = prop['background-position']; delete prop['background-position']; } if ('backgroundPosition' in prop) { prop.backgroundPosition = '(' + prop.backgroundPosition; } return oldAnim.apply(this, arguments); }; function toArray(strg) { strg = strg.replace(/left|top/g, '0px'); strg = strg.replace(/right|bottom/g, '100%'); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; }
以上就是js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)的主要代碼,希望對(duì)大家動(dòng)手實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊圖片切換效果。
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
- JS鼠標(biāo)滑過(guò)圖片時(shí)切換圖片實(shí)現(xiàn)思路
- 一個(gè)簡(jiǎn)單的js鼠標(biāo)劃過(guò)切換效果
- JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果(類(lèi)似360默認(rèn)頁(yè)面滾動(dòng)切換效果)
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的實(shí)例代碼
- JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
- js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
相關(guān)文章
JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式
最近在做項(xiàng)目的時(shí)候,需要把后臺(tái)返回的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等的格式,接下來(lái)通過(guò)本文給大家分享JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式 ,需要的朋友可以參考下2019-07-07原生js實(shí)現(xiàn)打字動(dòng)畫(huà)游戲
本文主要分享了原生js實(shí)現(xiàn)打字動(dòng)畫(huà)游戲的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02關(guān)于JavaScript數(shù)組對(duì)象去重的幾種方法
這篇文章主要介紹了關(guān)于JavaScript數(shù)組對(duì)象去重的幾種方法,不管是map對(duì)象的特性還是reduce方法都是很好用的去重方法,需要的朋友可以參考下2023-04-04用js寫(xiě)的一個(gè)路由(簡(jiǎn)單實(shí)例)
下面小編就為大家?guī)?lái)一篇用js寫(xiě)的一個(gè)路由(簡(jiǎn)單實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09基于OL2實(shí)現(xiàn)百度地圖ABCD marker的效果
JS數(shù)組求和的常用方法實(shí)例小結(jié)
這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript常見(jiàn)的遍歷、循環(huán)、歸并等數(shù)組操作相關(guān)技巧,需要的朋友可以參考下2019-01-01JavaScript分頁(yè)功能的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript分頁(yè)功能的實(shí)現(xiàn)方法,涉及javascript操作分頁(yè)的相關(guān)技巧,需要的朋友可以參考下2015-04-04JavaScript時(shí)間格式化函數(shù)功能及使用示例
這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11