js鼠标点击图片切换效果实现代码

本文实例讲述了射流研究…鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下：运行效果截图如下：

具体代码如下：

超文本标记语言代码：

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=' sub 1 ' style=' background-position :0；0 'lia href='# '报价：11.99-23.69万/a/li lia href='# '车身结构：三箱/a/li lia href='# '油耗：8.3-12.0L/a/Li/ul/Li class=' bg1 ' style=' background-position :-266 px 0px；'a id='bg2' href='# '索纳塔8/a ul class=' sub 2 ' style='背景-位置：-266 px；0 'lia href='# '报价：13.39-22.59万/a/li lia href='# '车身结构：三箱/a/li lia href='# '油耗：9.0-12.0L/a/Li/ul/Li class=' last bg1 ' style=' background-position :-532 px 0px；'a id=' bg3 ' href=' # ' K5/a ul class=' sub 3 ' style=' background-position :-266 px；0 'lia href='# '报价：10.88-25.58万/a/li lia href='# '车身结构：三箱/a/li lia href='# '油耗：8.4-13.0升/a/li /ul /li /ul /divcss代码：

ul.menu阿利{ float:left宽度宽度：265px高度：50 px页边距-顶部：450 px文本对齐：居中；线高：50 pxcolor: # ddd背景色： # 333;字母间距：1 px光标：指针指针；文本装饰：无；文本-阴影：0 px 0px 1px # fff} ul。菜单Li ul {列表式：无；float:left边距-top :-180 px；宽度：100%;height :110 xpadding-top :20 px；背景-重复：不重复；背景-颜色：透明；} ul。菜单Li ul Li {显示：无；} ul。菜单Li ul。sub 1 {背景图像： URL('./img/bg1 sub。png ')；} ul。菜单Li ul。sub 2 {背景图像： URL('./img/bg2 sub。png ')；} ul。菜单Li ul。sub 3 {背景图像： URL(./img/bg3 sub。巴布亚新几内亚)；}ul.menu li ul阿利{ color: # fff文本装饰：无；线高：30 px左边距left :20 pxtext-shadow :1 px 1px 1px # 444；font-size :11 px} ul。菜单Li ul阿利：悬停{边框-底部：1 px虚线# fff} ul。菜单Li ul。sub 1 Li {显示：块；}js代码：

if(！document.defaultView ||！文件。默认视图。get computed style){//IE6-IE8 var old curcs=jquery。curcsjquery。curcs=function(elem，name，force){ if(name==' background-position '){ name=' background-position '；}如果(姓名！=='backgroundPosition' ||！艾伦。当前样式| | elem。当前样式[名称]){返回旧curcs。应用(这个，参数)；} var style=elem.styleif(！强制样式样式[名称]) {返回样式[名称];}返回old curcs(elem，‘背景位置x’，force)”“old curcs(elem，‘背景位置y’，force)；};} var old anim=$。fn。动画；$ .fn。animate=function(prop){ if(' background-position ' in prop){ prop。背景位置=道具['背景-位置']；删除道具['背景-位置'];} if ('backgroundPosition '在道具){道具。背景位置=“(”道具。背景位置；}返回oldAnim.apply(这个，参数)；};函数至数组(strg){ strg=strg。替换(/left | top/g，' 0px ')；strg=strg。替换(/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)/)；返回[parseFloat(res[1]，10)，res[2]，parseFloat(res[3]，10)，RES[4]]；}以上就是射流研究…鼠标点击图片切换效果实现的主要代码，希望对大家动手实现鼠标点击图片切换效果。