jquery折叠效果
jquery折叠效果，图片折叠收缩，效果非常棒！
代码打包下载:jquery折叠效果
效果图:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>jquery折叠效果</title>
<style>
* {margin:0;padding:0;}
#box {margin:20px auto;width:700px;height:300px;}
#box .item {height:300px;width:100px;float:left;cursor:pointer;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$("#box .item").mouseover(function(){
$(this).siblings().stop().animate({width:'100px'});
$(this).stop().animate({width:'400px'});
});
});
</script>
</head>
<body>
<div id="box">
<div class="item" style="width:400px;background:url(http://www.120muban.com/data1/20140902/1.jpg) no-repeat"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/2.jpg) no-repeat"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/3.jpg) no-repeat"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/4.jpg) no-repeat"></div>
<!--<div class="item" style="width:400px;background:url(http://www.120muban.com/data1/20140902/1.jpg) no-repeat right top;"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/2.jpg) no-repeat right top;"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/3.jpg) no-repeat right top;"></div>
<div class="item" style="background:url(http://www.120muban.com/data1/20140902/4.jpg) no-repeat right top;"></div>-->
</div>
</body>
</html>相关文章
- jquery折叠效果
jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图:
- jQuery日期选择器插件jquery.date_input.js
官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复
- 很棒的网站底部导航条效果
很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载： 很棒的网站底部导航条效果 效果截图：
- 医疗网站常用的左右滑动Banner效果_jquery插件
医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=
随机推荐
- jquery折叠效果
jquery折叠效果，图片折叠收缩，效果非常棒！ 代码打包下载: jquery折叠效果 效果图:
- jQuery日期选择器插件jquery.date_input.js
官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复
- 很棒的网站底部导航条效果
很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载： 很棒的网站底部导航条效果 效果截图：
- 医疗网站常用的左右滑动Banner效果_jquery插件
医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=