关注前端开发
关注用户体验

jQuery渐变弹出层

css:
[css]#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;}
.raceShow{background-color:#f1f1f1;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]

赞(2)
未经允许不得转载:大前端 » jQuery渐变弹出层
分享到: 更多 (0)

评论 10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #9

    of course, diamond rings would always be the best type of wedding rings that you can give your wife,.

    Nonton Anime1个月前 (05-10)回复
  2. #8

    Excellent goods from you, man. I have understand your stuff previous to and you are just too great. I actually like what you’ve acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still care for to keep it wise. I can not wait to read far more from you. This is really a wonderful site.

    cat1个月前 (05-08)回复
  3. #7

    I am curious to find out what blog system you are utilizing? I’m having some small security issues with my latest blog and I would like to find something more secure. Do you have any recommendations?

    rajapoker2个月前 (05-03)回复
  4. #6

    Aw, it was a very nice post. In concept I would like to invest writing such as this moreover – taking time and actual effort to make a good article… but exactly what do I say… I procrastinate alot and no indicates manage to get something done.

    Dillon Ursino3个月前 (03-11)回复
  5. #5

    我就想说下, 你全站的 字体在我这里 看来 很模糊

    小58年前 (2011-11-15)回复
    • 你电脑里的微软雅黑需要修正一下,下载微软雅黑修正工具吧

      浩子8年前 (2011-11-15)回复
  6. #4

    貌似木有代码高亮了

    welpher.yu8年前 (2011-10-10)回复
  7. #3

    附上一个demo就好了,不然很难看的明白,那些tag,id,class是怎么个结构都弄不清楚

    水中月明8年前 (2011-08-15)回复
  8. #2

    留根毛~

    wontao8年前 (2011-08-01)回复
  9. #1

    [:12]

    ppt9年前 (2010-08-25)回复

themebetter 国内更好的WordPress主题服务商

立即前往