JS选项卡动态替换banner图片路径的方法
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍js动态切换图片的方法，包括了js动态切换图片的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下： index.css文件如下： index.html如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
在我的应用程序中，我想使用一个动态tabView，其中每个选项卡都有一个不同页面的< code>ui:include。我有一个扩展< code>Tab的< code>TabObject列表。< code>TabObject有一个xhtml页面作为字符串属性: 在我的第一次尝试中，我想动态添加选项卡： 但是不适用于使用此技术的变量。到目前为止，我的解决方案是： 这是我的方法: 在事件回调中，我无法获
-
本文向大家介绍js实现自动轮换选项卡，包括了js实现自动轮换选项卡的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js自动轮换选项卡的具体代码，供大家参考，具体内容如下 效果图： 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍php 替换文章中的图片路径,下载图片到本地服务器的方法，包括了php 替换文章中的图片路径,下载图片到本地服务器的方法的使用技巧和注意事项，需要的朋友参考一下 php 替换文章中的图片路径，下载图片到本地服务器 以上这篇php 替换文章中的图片路径,下载图片到本地服务器的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍js选项卡的实现方法，包括了js选项卡的实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js选项卡的实现方法。分享给大家供大家参考。具体分析如下： 一、思路 1. 获取元素； 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件； 3. 点击当前按钮时会以高亮状态显示，通过for循环历遍把所有的按钮样式设置为空在把所有div的d
-
我一直在尝试在我的应用程序中动态替换一个片段，但这样做时，我一直会遇到RuntimeException，因为它找不到应该添加片段的容器ID。我尝试过在类似线程上找到的每一个解决方案，从干净的构建到使用ChildFragmentManager，但仍然有相同的错误。最奇怪的是，当我在onCreate中没有指定任何容器时，一切都很顺利，但一旦指定了容器，应用程序就会崩溃。以下是代码和堆栈跟踪： 堆栈跟踪