jquery基础

原创 2012年03月27日 21:05:22

1、



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p{
    
display:none;    
    
    }


</style>
<script language="javascript" type="text/javascript" src="../js/jquery.js">
</script>
<script language="javascript" type="text/javascript" src="window-center.js">
</script>
<script language="javascript" type="text/javascript" src="window-left.js">
</script>
<script language="javascript" type="text/javascript" src="window-right.js">
</script>
<script language="javascript" type="text/javascript" src="window-left-top.js">
</script>
<script language="javascript" type="text/javascript" src="window-right-top.js">
</script>

<link type="text/css" rel="stylesheet" href="window-center.css">
<script language="javascript" type="text/javascript">
$(document).ready(function(){
   var windowHeight=$(window).height();
   var windowWidth=$(window).width();
   var documentHeight=$(document).height();
   var documentWidth=$(document).width();
    
    //利用toggle方法显示和隐藏
    
    $("#btn_center").click(function(){
        
          if(windowHeight<documentHeight){
            $(window).scroll(function(){
               popCenterWindow();
             });
         }else{
            popCenterWindow();
         }
    
    });
    $("#btn_left").click(function (){
        initLeft();
         popCenterWindowLeft();    
        
        });    
    $("#btn_right").click(function (){
         initRight();
         popCenterWindowRight();
             
        });    
    $("#btn_left-top").click(function (){
        initLefttop();
         popCenterWindowLefttop();    
        
        });    
    $("#btn_right-top").click(function (){
         initRighttop();
         popCenterWindowRighttop();
              
        });    
    });

</script>


</head>

<body><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<input type="button" id="btn_center" value="弹出居中窗口">
<input type="button" id="btn_left" value="弹出居左下角窗口">
<input type="button" id="btn_right" value="弹出居右下角窗口">
<input type="button" id="btn_left-top" value="弹出居左上角窗口">
<input type="button" id="btn_right-top" value="弹出居右上角窗口">
<div class="window" id="center">

  <div class="title"><img src="1.gif">CSDN欢迎你-居中窗口</div>
  <div class="content">3gput.com你好</div>

</div>
<div class="window" id="right">

  <div class="title"><img src="1.gif">CSDN欢迎你-居左窗口</div>
  <div class="content">3gput.com你好</div>

</div>
<div class="window" id="left">

  <div class="title"><img src="1.gif">CSDN欢迎你-居右窗口</div>
  <div class="content">3gput.com你好</div>

</div>
<div class="window" id="right-top">

  <div class="title"><img src="1.gif">CSDN欢迎你-居右上窗口</div>
  <div class="content">3gput.com你好</div>

</div>
<div class="window" id="left-top">

  <div class="title"><img src="1.gif">CSDN欢迎你-居左上窗口</div>
  <div class="content">3gput.com你好</div>

</div>
</body>
</html>

2、window-center.js

  //定义一些量变


//获得窗口的高度
var windowHeight;
//获得窗口的宽度
var windowWidth;

//获得弹窗的高度
var popHeight;
//获得弹窗的宽度
var popWidth;

//获取滚动条滚动的宽度
var scrollTop;
//获取滚动条滚动的宽度
var scrollLeft;

//延迟时间
var time;

function init(){
windowHeight=$(window).height();
 windowWidth=$(window).width();

popHeight=$(".window").height();
 popWidth=$(".window").width();
 
 scrollTop=$(window).scrollTop();
 scrollLeft=$(window).scrollLeft();
}

//关闭窗口

    
function closeWindow(){
 //找到X的图片,家单击事件,并且关闭窗口
 $(".title  img").click(function(){
    
       $(this).parent().parent().hide("slow");
 });    
}


//定义弹出注重窗口的方法
        
function popCenterWindow(){    
clearTimeout(time);
    time=setTimeout(function(){
    init();
    //计算弹出窗口的左上角Y的偏移量
    var popY=(windowHeight-popHeight)/2+scrollTop;
    var popX=(windowWidth-popWidth)/2+scrollLeft;

    //关闭窗口
      closeWindow();

//设定窗口的位置
//$("#center").css("top",popY).css("left",popX).show("slow");

$("#center").animate({top:popY,left:popX},500).show();

},80);
}




版权声明:本文为博主原创文章,未经博主允许不得转载。

JQuery笔记——关于Rebecca Murphey所著《jQuery基础》(jQuery Fundamentals)

【目录】  一、选择网页元素  二、改变结果集  三、链式操作  四、元素的操作:取值和赋值  五、元素的操作:移动  六、元素的操作:复制、删除和创建  七、工具方法  八、事件操作  九、特殊效果...
  • Illusion_1202
  • Illusion_1202
  • 2016年07月04日 16:03
  • 933

JQuery基础入门

jQuery是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。...
  • u010164936
  • u010164936
  • 2015年02月13日 21:06
  • 740

JQuery基础一

alert($) 当弹出以上信息时,说明环境已经搭建好用JS获取class的方法document.getElementById('div1'); document.getElementsByTagNa...
  • a839371666
  • a839371666
  • 2017年03月13日 21:02
  • 106

jquery插件基础解析—jquery插件实战教程(2)

作者只是简单的贴出了colortips这个插件的示例和代码,同时提取出了jquery插件的基础模板: (function($){     $.fn.插件名= function(sett...
  • wangshfa
  • wangshfa
  • 2014年07月24日 23:22
  • 504

jQuery基础笔记

搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行。 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库。在网...
  • AinSnow
  • AinSnow
  • 2015年01月22日 17:35
  • 1199

JQuery基础事件

1. 事件绑定 $("button").bind("click", function() { alert("ok"); }) $("button").bind("click mou...
  • hhan_bj
  • hhan_bj
  • 2018年01月18日 14:19
  • 14

jQuery基础-事件篇

一、鼠标事件 1、click与dbclick事件:click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作 方法一:$ele.click() 绑定$ele元素,不带...
  • zd_3226
  • zd_3226
  • 2016年07月23日 18:06
  • 276

Jquery基础

Jquery js中的属性和事件在Jquery中几乎都变成了方法
  • LengSeXiZuo
  • LengSeXiZuo
  • 2014年06月20日 20:40
  • 471

jquery基础

第0章:在线资源 官网:http://jquery.com/ Wiki:http://learn.jquery.com/ API:http://remysharp.com/jquery-api/ 有用...
  • Tianxing10
  • Tianxing10
  • 2013年09月08日 00:02
  • 868

JQuery基础

 JQuery是一个新型的javascript库。下面是在网上学习的一些JQuery的最基本的函数的使用:$(document).ready(function() {    $("div").clic...
  • thamsyangsw
  • thamsyangsw
  • 2008年12月09日 13:07
  • 491
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery基础
举报原因:
原因补充:

(最多只允许输入30个字)