- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- body { font: 12px Georgia, serif; }
- a { text-decoration: none; }
- #header{margin:50px auto}
- #header p{text-align:center;font-size:16px;font-weight:bold}
- #box{width:400px;height:200px;background-color:#ccc;text-align:center}
- #footer{text-align:center;font-size:14px;position:absolute;bottom:50px}
- </style>
- <script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
- <script type="text/javascript">
- var box_left = 0;
- $(document).ready(function () {
- box_left = ($(window).width() - $('#box').width()) / 2;
- $('#box,#footer').CSS({'left': box_left, 'position':'absolute'});
- });
- function shock()
- {
- for (i = 1; i < 7; i++)
- {
- $('#box').animate({
- 'left': '-=15'
- }, 3, function() {
- $(this).animate({
- 'left': '+=30'
- }, 3, function() {
- $(this).animate({
- 'left': '-=15'
- }, 3, function() {
- $(this).animate({
- 'left': box_left
- }, 3, function() {
- // shock end
- });
- });
- });
- });
- }
- }
- </script>
- </head>
- <body>
- <div id="header">
- <p>仿wp后台登录错误时左右晃动某一层</p>
- </div>
- <div id="box"><a href="#" onclick="shock();return false;">单击我查看效果</a></div>
- <div id="footer">
- Copyright © 2010 <a href="<a href="http://xiaosong.org">http://xiaosong.org">快乐忆站 </a>All Rights Reserved | Powered by <a href="<a href="http://xiaosong.org">http://xiaosong.org"> 小松</a>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/110120131546.html
来源: http://www.codesnippet.cn/detail/110120131546.html