- A+
function begin_button() {
echo '';
}
<!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">
<title>Fancy Textbox Animations using jQuery</title>
<link href="jQuery_files/demo.css" rel="stylesheet" type="text/css">
<script src="jQuery_files/jquery.js"></script>
<script src="jQuery_files/jquery_002.js" type="text/javascript"></script>
<link href="jQuery_files/font-awesome.css" rel="stylesheet" type="text/css">
<link href="jQuery_files/fancy-textbox.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/fancy-textbox-ie.css" />
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
$('input').ftext();
});
</script>
</head>
<body>
<div class="ppnl">
<h1>Fancy Textbox Animations</h1>
<h2>输入框动画效果</h2>
</div>
<div class="clearfix">
</div>
<div class="pn1">
<ul class="list clearfix">
<li>
<div class="fancy-textbox-wrapper slide"><input type="text" data-animation="slide" id="fancy" data-label="slide" data-mask="滑动" class="fancy-textbox masked" style="text-indent: 60px;" value="滑动"></div></li>
<li>
<div class="fancy-textbox-wrapper clean-slide"><input type="text" data-animation="clean-slide" id="clean" data-label="clean" data-mask="无背景颜色的滑动" class="fancy-textbox masked" style="text-indent: 68px;" value="无背景颜色的滑动"><label class="label" for="clean" style="transform: translateX(0px);">clean</label></div>
</li>
<li>
<div class="fancy-textbox-wrapper clean-slide"><input type="text" data-animation="clean-slide" id="clean" data-label="clean" data-label-bg="#82cff0" data-label-color="#fff" data-mask="有背景颜色的滑动" class="fancy-textbox masked" style="text-indent: 68px;" value="有背景颜色的滑动"><label class="label" for="clean" style="transform: translateX(0px);">clean</label></div>
</li>
</ul>
</div>
<div class="pn2">
<ul class="list clearfix">
<li>
<div class="fancy-textbox-wrapper up"><input type="text" data-animation="up" id="up" data-label="up" data-mask="向上" class="fancy-textbox masked" style="text-indent: 40px;" value="向上"><label class="label" for="up" style="transform: translateY(0px);">up</label></div>
</li>
<li>
<div class="fancy-textbox-wrapper fade"><input type="text" data-animation="fade" id="fade" data-label="fade" data-mask="消失" class="fancy-textbox masked" style="text-indent: 57px;" value="000"><label class="label" for="fade" style="opacity: 1;">fade</label></div>
</li>
<li>
<div class="fancy-textbox-wrapper rotate-3d-left"><input type="text" data-animation="rotate-3d-left" id="rotate-3d-left" data-label="3D旋转(向左)" data-mask="看看效果" class="fancy-textbox masked" style="text-indent: 107px;" value="看看效果"><label class="label" for="rotate-3d-left">3D旋转(向左)</label></div>
</li>
</ul>
</div>
<div class="pn3">
<ul class="list clearfix">
<li><div class="fancy-textbox-wrapper"><input type="text" id="Text1" data-icon="icon-user" data-mask="用户图标(无动画)" class="fancy-textbox masked" style="text-indent: 40px;" value="1111"><label class="label icon" for="Text1"><i class="icon-user"></i></label></div></li>
<li><div class="fancy-textbox-wrapper flip"><input type="text" data-animation="flip" id="Text1" data-icon="icon-user" data-mask="用户图标(有动画)" class="fancy-textbox masked" style="text-indent: 40px;" value="用户图标(有动画)"><label class="label icon" for="Text1"><i class="icon-user"></i></label></div></li>
<li><div class="fancy-textbox-wrapper flip"><input type="text" data-animation="flip" id="Text1" data-icon="icon-ok" data-mask="OK图标" class="fancy-textbox masked" style="text-indent: 40px;" value="00"><label class="label icon" for="Text1"><i class="icon-ok"></i></label></div></li>
</ul>
</div>
</body></html>
复制 运行一下
