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


Posted in Javascript onNovember 19, 2015

本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考,具体如下:

运行效果截图如下:

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

具体代码如下:

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="#">报价:11.99-23.69万</a></li>
 <li><a href="#">车身结构:三箱</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="#">报价:13.39-22.59万</a></li>
 <li><a href="#">车身结构:三箱</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="#">报价:10.88-25.58万</a></li>
 <li><a href="#">车身结构:三箱</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鼠标点击图片切换效果实现的主要代码,希望对大家动手实现鼠标点击图片切换效果。

Javascript 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
常用jQuery代码分享
Jul 14 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
Bootstrap每天必学之简单入门
Nov 19 #Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 #Javascript
Jquery 全选反选实例代码
Nov 19 #Javascript
Bootstrap每天必学之前端开发框架
Nov 19 #Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 #Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python调用c++传递数组的实例
2019/02/13 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
网络书店创业计划书
2014/02/07 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
质量保证书范本
2014/04/29 职场文书
倡议书格式模板
2014/05/13 职场文书
组工干部对照检查材料
2014/08/25 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
兴趣班停课通知
2015/04/24 职场文书
身份证丢失证明
2015/06/19 职场文书
主婚人致辞精选
2015/07/28 职场文书
Python time库的时间时钟处理
2021/05/02 Python