JS选项卡动态替换banner图片路径的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下:

这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径。

参数说明如下:

obj 当前触发事件的对象
hc 当前选中元素的类名
content 选择需要替换路径的图片
url 为图片的路径

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡动态替换banner图片路径</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 hoverFn($("ul li"),"hover_css",$("p img"),"big");//调用函数 
 /*
  定义鼠标滑过替换图片路径的
 函数 2012.8.24 
  作者 zoowar 
  参数说明
  obj 当前触发事件的对象
  hc 当前选中元素的类名
  content 选择需要替换路径的图片
  url 为图片的路径
 */
 function hoverFn(obj,hc,content,url){
 obj.hover(function(){
  var h_css=hc;  
  $(this).addClass(h_css).siblings().removeClass(h_css);
  var imgUrl=$(this).attr(url);
  content.attr("src",imgUrl);  
  });
 }
})
</script>
<style type="text/css">
div{
width:1024px;height:768px;margin:0 auto;
}
ul{
width:1024px;height:40px;margin:0;padding:0;
}
ul li{
width:254px;line-height:40px;
border-bottom:solid 2px #FB066F;text-align:center;
list-style-type:none;float:left;margin-right:2px;
background:#fff;
}
ul li.hover_css{
border-bottom:solid 2px #06F;background:#f0f0f0;
}
p{
margin:0;padding:0;text-align:center;padding-top:20px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="hover_css" big="images/wall_s1.jpg">风景</li>
<li big="images/wall_s2.jpg">美女</li>
<li big="images/wall_s3.jpg">帅锅</li>
<li big="images/wall_s4.jpg">恶搞</li>
</ul>
<p>
<img src="images/wall_s1.jpg" />
</p>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 #Javascript
javascript中this的四种用法
May 11 #Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
js模块加载方式浅析
2017/08/12 Javascript
详解vue中组件参数
2018/07/09 Javascript
深入了解js原型模式
2019/05/30 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python学习 流程控制语句详解
2016/06/01 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python实现简单图书管理系统
2019/11/22 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
财务助理岗位职责
2013/11/10 职场文书
社会保险接收函
2014/01/12 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
会计简历自我评价
2015/03/10 职场文书
民主生活会意见
2015/06/05 职场文书
在职证明格式样本
2015/06/15 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL