jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

 更新时间:2015年09月19日 10:31:24   作者:企鹅   我要评论
这篇文章主要介绍了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果,涉及jQuery响应鼠标事件操作页面元素动画效果的实现技巧,需要的朋友可以参考下

本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果。分享给大家供大家参考。具体如下:

这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery从页面右上角弹出的浮层代码</title> 
<style>
*{margin:0;padding:0;list-style-type:none;}
body{font-family:'microsoft yahei';}
a{text-decoration:none;}
.showdiv{color:#fff;padding:8px 15px;background:#09F;text-align:center;display:block;width:150px;margin:100px auto;}
.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}
.showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}
.showbox .mainlist{padding:10px;}
.showbox .mainlist p{font:normal 14px/2 'microsoft yahei';text-indent:2em;color:#333;padding-top:5px;}
#zhezhao{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".showdiv").click(function(){
  var box =300;
  var th= $(window).scrollTop()+$(window).height()/1.6-box;
  var h =document.body.clientHeight;
  var rw =$(window).width()/2-box;
  $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);
  $("#zhezhao").css({
   display:"block",height:$(document).height()
  });
  return false;
 });
 $(".showbox .close").click(function(){
  $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
  $("#zhezhao").css("display","none");
 });
});
</script>
</head>
<body>
 <a class="showdiv" href="#">点击我弹出浮层</a>
 <div class="showbox">
  <h2>澳门金沙网上娱乐简介<a class="close" href="#">关闭</a></h2>
  <div class="mainlist">
   <p>澳门金沙网上娱乐是国内专业的网站建设资源、脚本编程学习类网站,提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效,为与网络编程从业者提供学习资料。
</p>
  </div>
 </div> 
 <div id="zhezhao"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章

  • 前端开发必知的15个jQuery小技巧

    前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jquery实现加载等待效果示例

    jquery实现加载等待效果示例

    加载等待效果想必大家都有见到过吧,其实很简单,在本文将为大家介绍下使用jquery是如何实现的,感兴趣的朋友可以参考下
    2013-09-09
  • jquery网页加载进度条的实现

    jquery网页加载进度条的实现

    本篇文章主要介绍了jquery网页加载进度条的实现 ,在页面加载的时候,上方红色的进度条,有兴趣的可以了解一下
    2017-06-06
  • jQuery动态移除与增加onclick属性的方法详解

    jQuery动态移除与增加onclick属性的方法详解

    这篇文章主要介绍了jQuery动态移除与增加onclick属性的方法,结合实例形式分析了jQuery使用attr与removeAttr方法针对元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-06-06
  • jQuery实现table表格checkbox全选的方法分析

    jQuery实现table表格checkbox全选的方法分析

    这篇文章主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • jQuery实现返回顶部功能

    jQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。希望大家能够喜欢
    2016-02-02
  • jquery+CSS3模拟Path2.0动画菜单效果代码

    jquery+CSS3模拟Path2.0动画菜单效果代码

    这篇文章主要介绍了jquery+CSS3模拟Path2.0动画菜单效果代码,涉及jquery鼠标click点击事件及页面元素样式动态变换的实现技巧,需要的朋友可以参考下
    2015-08-08
  • jQuery.holdReady()使用方法

    jQuery.holdReady()使用方法

    jQuery.holdReady()方法允许jQuery的完成事件被该函数锁定,下面为大家介绍下其具体的使用
    2014-05-05
  • jquery+css实现侧边导航栏效果

    jquery+css实现侧边导航栏效果

    这篇文章主要为大家详细介绍了jquery+css实现侧边导航栏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • jquery.form.js实现将form提交转为ajax方式提交的方法

    jquery.form.js实现将form提交转为ajax方式提交的方法

    这篇文章主要介绍了jquery.form.js实现将form提交转为ajax方式提交的方法,涉及jQuery插件实现form表单的Ajax提交技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论