jq实现果冻抖动效果

zhibin07

浏览: 315382 次

最近访客更多访客>>

u012363178

vbkan23

sysysy300

xxydsny1314

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
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">
	<head>
		<meta http-equiv=Content-Type content="text/html;charset=utf-8">
		<script type="text/javascript"src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
		<style type="text/css">
			.test{
				margin:10px 0px;
				background-color:#7DBB00;
				height:150px;
				border:1px #ccc solid;
				-moz-border-radius: 5px;
				-khtml-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 10px;
				opacity:0.8;
			}
		</style>
	</head>
	<body style="background-color:#e8e8e8;">
		<div style="margin:50px auto;width:900px;overflow:visible;">
			<div id="test_01" class="test"></div>
			<div id="test_02" class="test"></div>
			<div id="test_03" class="test"></div>
			<div id="test_04" class="test"></div>
			<div id="test_05" class="test"></div>
			<div id="test_06" class="test"></div>
		</div>
		<script type="text/javascript">
			$('.test').hover(function(){
				$(this).animate({
					width: 920,
					height: 170,
					marginLeft: -20,
					opacity:0.8
				}, 100 ).animate({
					width: 910,
					height: 160,
					marginLeft: -10,
					opacity:0.9
				}, 100 ).animate({
					width: 920,
					height: 170,
					marginLeft: -20,
					opacity:1
				}, 100 )
			},function(){
				$(this).stop(true).animate({
					width: 900,
					height: 150,
					marginLeft: 0,
					opacity:0.8
				}, 100 );
			});
		</script>
	</body>
</html>

demo.rar (704 Bytes)
下载次数: 1

分享到：

NetBeans 一些配置 | PHP 实现301转向代码

2013-03-20 10:15
浏览 751
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jq实现果冻抖动效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jq实现果冻抖动效果

评论

发表评论

相关推荐

js生成玫瑰花 源代码

水果忍者JS版

php可编辑表格

分享设置

GooleEye

ie6 form.submit()不能正常提交

实现 鼠标移上去出现多菜单

jquery 轮播

<marquee>aa</marquee>实现内容滚动时首尾相连，不出现空白的时候

网站统计中的数据收集原理及实现

网站统计中的数据收集原理及实现

jquery控制css的display(控制元素的显示与隐藏)

图片submit reset

jQuery选择器大全

Javascript+PHP实现在线拍照功能

50个jquery试用代码段++25个实用的jQuery技巧和解决方案

JS 对cookie 的一些操作

js字数限制 删除多余的字符

js 数字逗号分节~

cookie--javascript记录用户之前是否访问本页面

最近访客更多访客>>

js生成玫瑰花源代码

实现鼠标移上去出现多菜单

js字数限制删除多余的字符