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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python交互界面的退出方法
2019/02/16 Python
python实现五子棋小程序
2019/06/18 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
安全协议书范本
2014/04/21 职场文书
卫生标语大全
2014/06/21 职场文书
代办委托书怎么写
2014/08/01 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python