JS选项卡动态替换banner图片路径的方法
本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下:
这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径。
参数说明如下:
obj当前触发事件的对象
hc当前选中元素的类名
content选择需要替换路径的图片
url为图片的路径
代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>选项卡动态替换banner图片路径</title> <scriptsrc="js/jquery.min.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).ready(function(){ hoverFn($("ulli"),"hover_css",$("pimg"),"big");//调用函数 /* 定义鼠标滑过替换图片路径的 函数2012.8.24 作者zoowar 参数说明 obj当前触发事件的对象 hc当前选中元素的类名 content选择需要替换路径的图片 url为图片的路径 */ functionhoverFn(obj,hc,content,url){ obj.hover(function(){ varh_css=hc; $(this).addClass(h_css).siblings().removeClass(h_css); varimgUrl=$(this).attr(url); content.attr("src",imgUrl); }); } }) </script> <styletype="text/css"> div{ width:1024px;height:768px;margin:0auto; } ul{ width:1024px;height:40px;margin:0;padding:0; } ulli{ width:254px;line-height:40px; border-bottom:solid2px#FB066F;text-align:center; list-style-type:none;float:left;margin-right:2px; background:#fff; } ulli.hover_css{ border-bottom:solid2px#06F;background:#f0f0f0; } p{ margin:0;padding:0;text-align:center;padding-top:20px; } </style> </head> <body> <div> <ul> <liclass="hover_css"big="images/wall_s1.jpg">风景</li> <libig="images/wall_s2.jpg">美女</li> <libig="images/wall_s3.jpg">帅锅</li> <libig="images/wall_s4.jpg">恶搞</li> </ul> <p> <imgsrc="images/wall_s1.jpg"/> </p> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。