jQuery选项卡切换图片效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了选项卡式的图片切换效果。

也就是点击顶部选项卡实现图片切换效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<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>
<script src="/wp-content/uploads/front-end-tutorial/error.html">风景</li>
    <li big="img/2.jpg">美女</li>
    <li big="img/3.jpg">帅锅</li>
    <li big="img/4.jpg">恶搞</li>
  </ul>
  <p><img src="img/1.jpg" /></p>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).hoverFn($("ul li"),"hover_css",$("p img"),"big"),调用此函数,此函数的作用会在下面介绍。

(3).function hoverFn(obj,hc,content,url){},此方法可以实现注册事件处理函数效果,第一个参数规定要注册处理函数的元素,第二个参数是class样式类名称,第三个参数规定p元素的img元素,第三个参数是选项卡li元素的big属性。

(4).obj.hover(function(){

  var h_css=hc;  

  $(this).addClass(h_css).siblings().removeClass(h_css);

  var imgUrl=$(this).attr(url);

  content.attr("src",imgUrl);  

}),首先将样式类名称赋值给你变量h_css。

为当前鼠标悬浮的li元素添加此样式类,然后其他的兄弟元素删除此样式类。

然后获取当前li元素的big属性值,其实也就是一个图片的url。

然后将p元素中的img图片链接地址换成上面获取的url地址。

二.相关阅读:

(1).hover事件可以参阅jQuery hover事件一章节。

(2).addClass()方法可以参阅jQuery addClass()一章节。

(3).siblings()方法可以参阅siblings()方法一章节。

(4).removeClass()方法可以参阅jQuery removeClass()一章节。

(5).attr()方法可以参阅jQuery attr()一章节。

回复

我来回复
  • 暂无回复内容