jQuery手风琴图片切换

2018-2-6 23:46| 作者: antzone| 查看: 1268| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了简单的手风琴图片切换效果。

当鼠标悬浮和离开,当前图片就会伸缩尺寸。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 1174px;
  height: 405px;
  margin: 0 auto;
  overflow: hidden;
}
li {
  float: left;
  list-style: none;
  width: 106px;
  overflow: hidden;
  height: 405px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $("ul li").mouseover(function () {
    $(this).stop().animate({ width: 538 }, 500);
    $(this).siblings().stop().animate({ width: 106 }, 500)
  })
})
</script>
</head>
<body>
<div class="box">
  <ul>
    <li style="width:538px;"><img src="demo/jQuery/img/a.jpg"></li>
    <li><img src="demo/jQuery/img/b.jpg"></li>
    <li><img src="demo/jQuery/img/c.jpg"></li>
    <li><img src="demo/jQuery/img/d.jpg"></li>
    <li><img src="demo/jQuery/img/e.jpg"></li>
    <li><img src="demo/jQuery/img/f.jpg"></li>
    <li><img src="demo/jQuery/img/g.jpg"></li>
  </ul>
</div>
</body>
</html>

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

一.实现原理:

原理其实非常的简单,就是通过鼠标悬浮来调整当前li元素的宽度和其他li元素的宽度,以此来达到视觉上图片伸缩的效果,所谓的伸缩其实就是设置图片被overflow:hidden尺寸的大小而已。

二.代码注释:

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

(2).$("ul li").mouseover(function () {}),为li元素注册mouseover事件处理函数。

(3).$(this).stop().animate({ width: 538 }, 500),以动画方式设置当前li元素的宽度为538px,stop()方法的作用是为了防止鼠标快速反复悬浮离开,导致动作重复执行的现象。

(4).$(this).siblings().stop().animate({ width: 106 }, 500),当前悬浮元素的其他的元素的宽度以动画方式设置为106px。

三.相关阅读:

(1).mouseover事件参阅jQuery mouseover事件一章节。

(2).animate()参阅jQuery animate()一章节。

(3).siblings()参阅jQuery siblings()一章节。

(4).stop()参阅jQuery stop()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部