jQuery晃动层特效实现方法

前端技术 2023/09/08 JavaScript

本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

<!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>jQuery晃动层</title>
<style type=\"text/css\">
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}
</style>
<script type=\"text/javascript\" src=\"js/jquery-1.6.2.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>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21995

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案