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 相关文章推荐
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JavaScript Tab菜单实现过程解析
May 13 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自定义函数返回多个值
2006/11/26 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
jquery实现手风琴效果实例代码
2013/11/15 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
《雨点》教学反思
2014/02/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
社区助残日活动总结
2014/08/29 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Flask搭建一个API服务器的步骤
2021/05/28 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis