- jQuery模拟skype按钮效果，代码演示了如何应用HTML5技术结合jQuery生成一个仿Skype网站表单提交风格的button？从技面层面来讲，通过CSS技术将图片覆盖于按钮之上，并实现动画效果，是一个使用jquery合成按钮的例子。
-
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿skype按钮效果[www.codesocang.com]</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").hover(function(){
$(".button img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
</script>
<style type="text/css">
body{font-family: Arial, Helvetica, Sans-Serif;font-size: 12px;margin: 20px;}
.button{padding: 4px 10px 3px 25px;border: solid 1px #8AB134;position: relative;cursor: pointer;display: inline-block;background-image: url( 'http://www.codefans.net/jscss/demoimg/201312/bkg.png' );background-repeat: repeat-x;font-size: 11px;height: 16px;text-decoration: none;color: #40740D;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;}
.button img{position: absolute;top: -4px;left: -12px;border: none;}
.button: hover{color: #8AB134;}
input, textarea{display: block;margin-bottom: 10px;width: 300px;}
</style>
</head>
<body>
<h1>如何使用jQuery生成一个仿Skype风格的button？</h1>
<hr />
<label for="name">请输入您的姓名：</label><input type="text" id="name" />
<a class="button" href="#"><img src="http://www.codefans.net/jscss/demoimg/201312/button.png" />确认提交</a> or <a href="#">取消</a><br /><img src="http://www.codefans.net/jscss/demoimg/201312/click_here.png" alt="Click here">
</body>
</html>
标签：网站源码