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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
javascript轮播图算法
2016/10/21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
vue登录注册实例详解
2019/09/14 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
python计算时间差的方法
2015/05/20 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python实现图片素描效果
2020/09/26 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
初中科学教学反思
2014/01/21 职场文书
导游个人求职信
2014/04/25 职场文书
品质标语大全
2014/06/21 职场文书
群众路线领导对照材料
2014/08/23 职场文书
干部年终考核评语
2015/01/04 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python