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在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
PHP的FTP学习(三)
2006/10/09 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
python实现图片文件批量重命名
2020/03/23 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python实现自动整理文件的脚本
2020/12/17 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
华清池导游词
2015/02/02 职场文书
信访工作个人总结
2015/03/03 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android