jquery折叠效果

模板网 2014-09-02

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>

相关文章

  1. 医疗网站常用的左右滑动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=

  2. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  3. 利用jQuery实现的简单轮播效果

    利用jQuery实现的简单轮播效果,代码简单容易理解。 效果截图:

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

随机推荐

  1. 医疗网站常用的左右滑动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=

  2. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  3. 利用jQuery实现的简单轮播效果

    利用jQuery实现的简单轮播效果,代码简单容易理解。 效果截图:

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery