JS选项卡动态替换banner图片路径的方法
2015-05-11 00:00
736 查看
本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下:
这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径。
参数说明如下:
obj 当前触发事件的对象
hc 当前选中元素的类名
content 选择需要替换路径的图片
url 为图片的路径
代码如下:
希望本文所述对大家的javascript程序设计有所帮助。
这里演示一个选项卡演示如何动态替换图片的方法,用一个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程序设计有所帮助。
相关文章推荐
- JS选项卡动态替换banner图片路径的方法
- 选项卡动态替换banner图片路径
- JS实现动态给图片添加边框的方法
- ie6 js替换图片路径 不显示问题
- js中设置背景图片的路径获得方法
- js动态切换图片的方法
- js动态切换图片的方法
- php 替换文章中的图片路径,下载图片到本地服务器的方法
- 通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
- 动态替换css和js的方法
- 超酷动态图片展示墙JS特效制作方法
- 10. 获取Magento域名及图片,JS路径方法
- JS表情替换代码,这里使用字符代替图片路径
- vue中如何动态绑定图片,vue中通过data返回图片路径的方法
- js实现在文本框输入图片的路径,在下方动态显示图片
- Node.js读写文件之批量替换图片的实现方法
- Node.js读写文件之批量替换图片的实现方法
- JS使用oumousemove和oumouseout动态改变图片显示的方法
- asp.net 文件路径问题,Png图片透明问题,js提示对象不支持属性和方法的解决方案
- 超酷动态图片展示墙JS特效制作方法