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 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
JavaScript严格模式详解
Nov 18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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
日本十大惊悚动漫
2020/03/04 日漫
在PHP中使用灵巧的体系结构
2006/10/09 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
文化产业实施方案
2014/06/07 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书