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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
javascript常用的正则表达式实例
May 15 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
小程序自定义轮播图圆点组件
Jun 25 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP设置进度条的方法
2015/07/08 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue生命周期的探索
2019/04/03 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python操作串口的方法
2015/06/17 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
最新结婚典礼主持词
2014/03/14 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
单位工作证明
2014/10/07 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
兴趣班停课通知
2015/04/24 职场文书
单位病假条范文
2015/08/17 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
创业计划书之甜品店
2019/09/18 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android