码迷,mamicode.com
首页 > Web开发 > 详细

jQuery渐变弹出层

时间:2014-07-05 18:15:42      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   strong   width   

css:

[css]#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;}
.raceShow{border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}[/css]

js:

[javascript]$(document).ready(function(){
var speed = 600;//动画速度
$(“#race a”).click(function(event){//绑定事件处理
event.stopPropagation();
var offset = $(event.target).offset();//取消事件冒泡
$(“#racePop”).css({ top:offset.top + $(event.target).height() + “px”, left:offset.left });//设置弹出层位置
$(“#racePop”).show(speed);//动画显示
});
$(document).click(function(event) { $(“#racePop”).hide(speed) });//单击空白区域隐藏
$(“#racePop”).click(function(event) { $(“#racePop”).hide(speed) });//单击弹出层则自身隐藏
});
[/javascript]

 

jQuery渐变弹出层,布布扣,bubuko.com

jQuery渐变弹出层

标签:style   blog   java   color   strong   width   

原文地址:http://www.cnblogs.com/songmz/p/3822783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!