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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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 禁止页面缓存输出
2009/01/07 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Python的pygame安装教程详解
2020/02/10 Python
parser.add_argument中的action使用
2020/04/20 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
机电一体化大学生求职信
2013/11/08 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
辞职信格式模板
2015/02/27 职场文书
会计简历自我评价
2015/03/10 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
可怜妈妈观后感
2015/06/09 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python