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

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]

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

评论 6

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

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

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

      浩子5年前 (2011-11-15)回复
  2. #4

    貌似木有代码高亮了

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

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

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

    留根毛~

    wontao6年前 (2011-08-01)回复
  5. #1

    [:12]

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

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

立即前往