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 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
js选择器全面解析
2016/06/27 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
pycharm导入源码的具体步骤
2020/08/04 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
求职信内容怎么写
2014/05/26 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
商务司机岗位职责
2015/04/10 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL