你的位置:快乐忆站 \ 前端 \ 文章正文

jQuery晃动层特效

一次偶然的机会,我在WP后台输错了密码,发现错误提示时那个层的晃动蛮有意思的,不过当时也没怎么去注意。后来自己装了PageCookery Microblog后发现他的后台错误提示也是这个效果,好奇心驱使我去看了页面的源代码之后恍然大悟,其实也蛮简单的~js一个循环就搞定了,不过得结合jQuery实现。题外话,现在觉得jQuery实在太好玩了,看了网上N多jQuery的插件感觉这个js库实在太强大了,为前端设计省了不少的事呢,加载了一个jQuery库,你可以让页面得到N多有趣的效果~

来看看今天要介绍的代码吧:

<script type="text/javascript">
var box_left = 0;
$(document).ready(function () {
        box_left = ($(window).width() - $('#box').width()) / 2;
        $('#box').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>

注意加载jQuery在先,这个都不用交代了吧,然后#box这个层必须使用绝对定位,否则是不起效果滴哦~^_^

看个demo吧,具体能用到哪里聪明的童鞋们应该有N多想法~

再次题外话:明天中午小松你就要回家了,然后就基本上3-4天在家,估计没得上网,穷村落,没网上也正常啊~更新和走访一起被暂停了,不过小松会经常用我的小5和大家交流的,最新消息请注意头部的公告栏~谢谢大家一如既往的支持,昨天小松博客Alexa进入了10W的门槛,很激动,当然最最要感谢的是那些支持我,经常来我博客的童鞋,小松再此衷心得对大家说一声:“谢谢!”

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 181#
    胶粘剂
    胶粘剂 Firefox 31.0 Windows 8.1 x64 Edition 2014-09-03 13:50 回复
    学习了,顶起
  2. 180#
    小松
    小松 2010-09-17 20:24 回复
    @Fanr:谢谢围观~谢谢支持~
  3. 179#
    Fanr
    Fanr 2010-09-17 19:22 回复
    这个都给你搞出来,强势!
    持续围观中!
  4. 178#
    小松
    小松 2010-09-15 13:02 回复
    @公子™:你没发现这里永远都只有两层的吗?
  5. 177#
    公子™
    公子™ 2010-09-15 12:15 回复
    回复108楼小松:貌似是这样..不过我的才一层唉~~。。。
  6. 176#
    公子™
    公子™ 2010-09-15 12:01 回复
    回复107楼小松:那杂看起来这么像嵌套呢...~~  
  7. 175#
    小松
    小松 2010-09-15 10:57 回复
    @公子™:我没有嵌套回复的哦~这个只是假象而已~
  8. 174#
    小松
    小松 2010-09-15 10:57 回复
    @kaka:那是,好歹我也是玩emlog的~
  9. 173#
    小松
    小松 2010-09-15 10:54 回复
    @kaka:不会吧,我最近都没怎么做回访呢...
    PS:是emlog不是emblog哦~
  10. 172#
    小松
    小松 2010-09-15 10:41 回复
    @kaka:哈哈,非常感谢你的到来~
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap