您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 其他特效 >

jQuery 动画效果 circle

时间：2014-06-09 08:30 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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> 
<title>jQuery 动画效果 circle</title> 
<style> 
	body {
		width:200px;
		margin:0 auto;
		margin-top:100px;
		background:#CCC;
	}
	#login{
		position:relative;
	}
	.circle_l, .circle_b {
		width:148px;
		height:148px;
		border-radius:80px;
		background:blue;
		border:1px solid #FFF;
	}
	.circle_l {
		width:138px;
		height:138px;
		position:absolute;
		top:5px;
		left:5px;
	}
	.circle_b {
		background:lightblue;
	}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
</head> 
<body>
<div id="login">
	<div class="circle_b">
		<div class="circle_l"></div>
	</div>
</div>
<script type="text/javascript"> 
	$(".circle_b").hover(function(){
		$(this).stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500)
				.css({"border-radius":"150px"});
		$(".circle_l").stop().animate({marginTop:"20"},500)
	},function(){
		$(this).stop().animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500)
				.css({"border-radius":"100px"});
		$(".circle_l").stop().animate({marginTop:"0"},500)
	})
</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jQuery 动画效果 circle，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。下班了匆忙做出来。当然，是基于 jQuery的，纯JS 还没有这个能力呢。
<script type="text/javascript">

$(".circle_b").hover(function(){

$(this).stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500)

.css({"border-radius":"150px"});

$(".circle_l").stop().animate({marginTop:"20"},500)

},function(){

$(this).stop().animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500)

.css({"border-radius":"100px"});

$(".circle_l").stop().animate({marginTop:"0"},500)

})

</script>

jQuery 动画效果 circle由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/qitatexiao/8636.html

标签：网站源码

上一篇：jQuery选择器参数及用法详解

下一篇：没有了

[其他特效] html5实现的旋转的太阳系动画

[其他特效] 采用VML技术绘制DNA图形

[其他特效] JS文字球状放大效果

[其他特效] 带缓冲的收缩与展开内容效果

[其他特效] 屏蔽鼠标右键代码

[其他特效] 仿Windows垂直调整代码

[其他特效] 鼠标事件之游来游去的小鱼

[其他特效] 网页调用media player代码

[其他特效] 网页状态栏页面停留时间特效

[其他特效] 超酷JS拖拽翻页效果

[其他特效] JS复制到剪切板

[其他特效] 清空代码防止查看源代码

相关内容推荐

信息化讲堂

3D透明精致PNG图标

javascript基础

人民邮电出版社

bluehost 美国空

填写你论坛签名档

动物萌宠高清图

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1