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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
jQuery 使用个人心得
2009/02/26 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
flask框架单元测试原理与用法实例分析
2019/07/23 Python
上海天奕面试题笔试题
2015/04/19 面试题
高一数学教学反思
2014/02/07 职场文书
公司授权委托书
2014/04/04 职场文书
公司请假条范文
2014/04/11 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python