- <!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 src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7/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="img/1.jpg">风景</li><li big="img/2.jpg">美女</li><li big="img/3.jpg">帅锅</li><li big="img/4.jpg">恶搞</li></ul>
- <p>
- <img src1="img/1.jpg" />
- </p>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/240720134784.html
来源: http://www.codesnippet.cn/detail/240720134784.html