展会信息港展会大全

jq实现果冻抖动效果
来源:互联网   发布日期:2016-01-26 10:50:49   浏览:2170次  

导读:!DOCTYPE html PUBLIC - W3C DTD XHTML 1 0 Transitional EN http: www w3 org TR xhtml1 DTD xhtml1-transitional dtdhtml xmlns=http: www w3 org 1999 xhtmlheadmeta http-equiv= ...

<!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>

赞助本站

人工智能实验室

相关热词: 抖动效果 jq

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港