<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Awesome Slide Out Button</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Slide Out Button with CSS3 and jQuery" />
<meta name="keywords" content="jquery, fancy, slide out, button, css3" />
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
</head>
<style>
body{
background:#f0f0f0 url(title.png) no-repeat top left;
font-family:Arial;
}
.back{
position:absolute;
top:400px;
left:20px;
background:#f0f0f0 url(back.png) no-repeat top left;
width:165px;
height:31px;
}
</style>
<body>
<div class="button_wrap">
<a class="button_aLeft" id="button_aLeft"><span>Use your Twitter ID</span></a>
<a class="button_bLeft slidebttn" id="button_bLeft">Sign <span>in</span></a>
</div>
<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Use your Twitter ID</span></a>
<a class="button_bRight slidebttn" id="button_bRight">Sign <span>in</span></a>
</div>
<div><a href="http://www.moobnn.com/" class="back"></a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.slidebttn').hover(
function () {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'225px'},300);
$slidelem.find('span').stop(true,true).fadeIn();
$this.addClass('button_c');
},
function () {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'70px'},200);
$slidelem.find('span').stop(true,true).fadeOut();
$this.removeClass('button_c');
}
);
});
</script>
</body>
</html>
基于CSS3和jQuery滑动特效.zip
版权申诉
10 浏览量
2022-11-25
10:22:40
上传
评论
收藏 74KB ZIP 举报
基于CSS3和jQuery滑动特效.zip （10个子文件） 
基于CSS3和jQuery滑动特效 jiaoben116 css 
style.css 2KB images 
a.png 3KB c.png 2KB b.png 1KB Thumbs.db 12KB
index.html 2KB title.png 18KB back.png 4KB Thumbs.db 6KB
基于CSS3和jQuery滑动特效.jpg 44KB资源评论
