jQuery晃动层特效实现方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 #Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 #Javascript
You might like
PHP云打印类完整示例
2016/10/15 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
使用python实现接口的方法
2017/07/07 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python实现换位加密算法的示例
2018/10/14 Python
基于python历史天气采集的分析
2019/02/14 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
自荐信范文
2013/12/10 职场文书
人事经理岗位职责
2014/04/28 职场文书
工作分析计划书
2014/04/30 职场文书
预防煤气中毒方案
2014/06/16 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
单位员工收入证明样本
2014/10/09 职场文书
党支部综合考察意见
2015/06/01 职场文书
青春雷锋观后感
2015/06/10 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers