热门关键字:
jquery > jquery插件 > jquery弹出层 > 网友Null分享Jquery实现超炫的弹出层特效

网友Null分享Jquery实现超炫的弹出层特效

12145
所属分类:jquery弹出层
发布时间:2013/5/10 10:01:58
下载量:2324
评论数:1
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=223

首先非常感谢网友Null的无私分享,此Jquery特效是一款非常实用、常用、超炫的弹出层作品,里面包含了渐现渐隐
、上下滑动4种效果,载入页面时将元素置于页面可见区域的顶部达到自上而下显示效果,弹出层自适应浏览器窗口大小。

 

特效核心代码如下:

function notice_show(){//显示
	var browser_visible_region_height=document.documentElement.clientHeight;//获取浏览器可见区域高度
	var element_height=$(".PopupLayer").outerHeight();//获取元素高度:height+paelement_heighting+margin
	//计算元素显示时的top值
	var element_show_top=(browser_visible_region_height-element_height)/2;
	$(".PopupLayer").stop(true).animate({top:element_show_top,opacity:1},1800);
}

function notice_hidden(){//隐藏
	var element_height=$(".PopupLayer").outerHeight();//获取元素高度:height+paelement_heighting+margin
	var ee=-element_height;//元素隐藏时的top值
	$(".PopupLayer").stop(true).animate({top:ee,opacity:0},1000);
}

 

效果如下:

网友Null分享Jquery实现超炫的弹出层特效

 

 





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:层特效 弹出层 滑动插件 消息提示 tip提示层 网友Null
  • 网友Null分享Jquery实现超炫的弹出层特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友Null分享Jquery实现超炫的弹出层特效
  • 网友Null分享Jquery实现超炫的弹出层特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐