jQuery晃动层特效实现方法

240 阅读 0 评论 159 点赞

我是靠谱客的博主鳗鱼电灯胆，最近开发中收集的这篇文章主要介绍jQuery晃动层特效实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了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>