java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验...

本文来自：曹胜欢博客专栏。转载请注明出处：http://blog..net/csh624366188

最近一直感觉自己好忙，每天都浑浑噩噩的过着，转眼间，好像有好长时间没有更新笨鸟到菜鸟了。现在想想，实在罪过了。自从从北京回来就一直投入不了状态，所以也想利用一下这个写博客的机会来促进自己早日投入状态吧。今天我们要讲的是jQuery动画的东西，其实一说到动画，我相信很多人想到的应该是flash吧。其实不然，现在我们将要用jquery来改变flash的一统天下，当然，我们这里所说的动画和flash所做的动画还是有很大的区别的。所以也谈不上他两个产品有什么竞争关系，下面我们就先通过一个简单的实例来看一下jquery的强大吧。

在很多web开发过程中，我们都会用到弹出层的情况，我们再做弹出层的时候大多数都应该用的js实现把。假设有如下需求:

·单击图中的"显示提示文字"按钮,在按钮的下方显示一个弹出

·单击任何空白区域或者弹出层,弹出层消失

用原始JavaScript我们也完全可以完成这个工作.有以下几点注意事项:

1.弹出层的位置需要动态计算.因为触发弹出事件的对象可能出现在页面的任何位置,比如截图中的位置.

2.为document绑定单击是关闭弹出层的函数,要使用多播委托,否则可能冲掉其他人在document绑定的函数.

3.为document绑定了关闭函数后,需要在显示函数中取消事件冒泡,否则弹出层将显示后立刻关闭

·下面我们来看一下用jquery来实现这里的弹出层是怎么实现的：

[html] view

plaincopy

print?

jQuery – 弹出层动画

$(document).ready(function()

{

//动画速度

var speed=500;

//绑定事件处理

$("#btnShow").click(function(event)

{

//取消事件冒泡，所谓事件冒泡就是在子控件触发事件时父控件也触发相应的事件

event.stopPropagation();

//获得触发事件控件的位置

var offset= $(event.target).offset();

//设置弹出层的位置

$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });

//动画显示弹出层

$("#divPop").show(speed);

});

//单击空白区域隐藏弹出层

$(document).click(function(event) { $("#divPop").hide(speed) });

//单击弹出层则自身隐藏

$("#divPop").click(function(event) { $("#divPop").hide(speed) });

});

弹出层

width: 300px; height: 100px;">

这里是弹出层

java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验...相关推荐

Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（二）面向对象之封装，继承，多态（上）...
Java是一种面向对象的语言,这是大家都知道的,他与那些像c语言等面向过程语言不同的是它本身所具有的面向对象的特性--封装,继承,多态,这也就是传说中的面向对象三大特性一:从类和对象开始说起: Oo ...
Java程序员的典型工作过程有哪些_Java程序员都要经历哪些阶段
原标题:Java程序员都要经历哪些阶段程序员从菜鸟到优秀的过程是需要时间,经验,不断的进阶,小编和大家一起看看每个阶段都要经历哪些成长阵痛: 没有防卫这个阶段很快就会过去,因为有无数的书本和&qu ...
程序员薪资怎么论高级还是初级_Java程序员的薪水取决于年龄还是技术？
1.薪资的高低与经验挂钩,但是经验的多少与从业年限没有必然的联系! 如果你工作以后,一直在别人设置的框架系统中编写代码,即使你工作再久,也依然知识一个初级程序员! 如果你工作以后,不断探索研究自己的框 ...
二流java程序员_一名90后二流大学程序员的自述：我是如何从“菜鸟”到“辣鸡”的...
本文来自"摩卡先生"的投稿,通过文字感受一下新手程序员强烈的奋斗激情. 1.编者注读过本文,能感受到作者作为典型90后不羁的一样,但文字内容远非作者自我调侃的那样从"菜 ...
老菜鸟致青春，程序员应该选择java 还是 c#-
致青春还记得自己那年考清华失败,被调剂到中科大软院,当初有几个方向可以选,软件设计.嵌入式.信息安全等等,毫不犹豫地选择了信息安全. 为什么选信息安全?这四个字听起来多牛多有感觉,我本科是学物理的, ...
asp.net2.0学习历程菜鸟到中级程序员的飞跃【月儿原创】
asp.net2.0学习历程菜鸟到中级程序员的飞跃 --30本好书点评作者:清清月儿主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.1 ...
asp.net2.0学习历程菜鸟到中级程序员的飞跃[z转]
asp.net2.0学习历程菜鸟到中级程序员的飞跃 --30本好书点评学历历程如果你是一个菜鸟或者自认为初学者那么本文非常适合你: 不能说这30本书就是最佳组合,但是可以说这个组合不差: 本人曾 ...
asp.net2.0学习历程菜鸟到中级程序员的飞跃转载
asp.net2.0学习历程菜鸟到中级程序员的飞跃 --30本好书点评主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.16 学历历程如 ...

java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验...

java程序员从笨鸟到菜鸟之_Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验...相关推荐

最新文章

热门文章