无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-14 23:55 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

jQuery实现的AJAX简单弹出层效果代码,js图片跟随

定义和用法

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。

本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考,具体如下:

ajax() 方法通过 HTTP 请求加载远程数据。

在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象。它的方法属性我不多说了,想详细了解的童鞋点击这里,//www.jb51.net/article/17266.htm。

运行效果截图如下:

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只能get,不能set),说到这里可能很多童鞋已经知道怎么做了,没错,就是这样!把得到的坐标赋值给图片定位属性中的Left与Top即可,很简单吧!下面提供一个实现的小Demo.
材料:两张你喜欢的图片,在这里就命名为"MUp.png"与"MDown.png",为什么会有两张图片呢,这里还实现了一个鼠标按下变化图片的效果。

图片 1

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

HTML Code is Here:

具体代码如下:

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

<div id="Main">
   <img src="MUp.png" id="Img"/>
 </div>
CSS Code is Here:
 *{ margin:px; padding:px;}
 #Img{ position:absolute; top:px; left:px;}
 #Main{ background-color:#F; width:px; height:px;}
JS Code is Here:
 window.onload=Main;
 //全局坐标变量
  var x="";
  var y="";
  //定位图片位置
  function GetMouse(oEvent)
  {
   x=oEvent.clientX;
   y=oEvent.clientY;
  document.getElementById("Img").style.left=(parseInt(x)-) "px";
  document.getElementById("Img").style.top=y "px";
  }
 //入口
 function Main()
 {
  var ele=document.getElementById("Main");
  //注册鼠标移动事件
  ele.onmousemove=function(){GetMouse(event);}
  // 注册鼠标按下事件
  ele.onmousedown=function(){ChangeBg("Img","MUp.png");}
  //注册鼠标弹回事件
  ele.onmouseup=function(){ChangeBg("Img","MDown.png");}
  }
 //图片变化
 function ChangeBg(id,url)
 {
  document.getElementById(id).src=url;
 }
<!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=gb2312" />
 <title>无标题文档</title>
 <script type="text/javascript" src="jquery1.3.2.js"></script>
 <style type="text/css">
  <!--
   html, body
  {
   height: 100%;
   margin: 0px;
   font-size: 12px;
  }
  .mydiv
  {
   background-color: #FFCC66;
   border: 1px solid #f00;
   text-align: center;
   line-height: 40px;
   font-size: 12px;
   font-weight: bold;
   z-index: 99;
   width: 300px;
   height: 120px;
   left: 50%; /*FF IE7*/
   top: 50%; /*FF IE7*/
   margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
   margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
   margin-top: 0px;
   position: fixed !important; /*FF IE7*/
   position: absolute; /*IE6*/
   _top: expression(eval(document.compatMode &&
   document.compatMode=='CSS1Compat') ?
   documentElement.scrollTop   (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
   document.body.scrollTop   (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
  }
  .mydiv2
  {
   background-color: #FFCC66;
   border: 1px solid #f00;
   text-align: center;
   line-height: 40px;
   font-size: 12px;
   font-weight: bold;
   z-index: 99;
   width: 400px;
   height: 400px;
   left: 50%; /*FF IE7*/
   top: 50%; /*FF IE7*/
   margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
   margin-top: -200px !important; /*FF IE7 该值为本身高的一半*/
   margin-top: 0px;
   position: fixed !important; /*FF IE7*/
   position: absolute; /*IE6*/
   _top: expression(eval(document.compatMode &&
   document.compatMode=='CSS1Compat') ?
   documentElement.scrollTop   (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
   document.body.scrollTop   (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
  }
  .bg
  {
   background-color: #666;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0; /*FF IE7*/
   filter: alpha(opacity=50); /*IE*/
   opacity: 0.5; /*FF*/
   z-index: 1;
   position: fixed !important; /*FF IE7*/
   position: absolute; /*IE6*/
   _top: expression(eval(document.compatMode &&
   document.compatMode=='CSS1Compat') ?
   documentElement.scrollTop   (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
   document.body.scrollTop   (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
  }
  -- ></style>
 <script language="javascript" type="text/javascript">
  function showDiv() {
   $('#popDiv').removeClass().addClass("mydiv").css("display","block").css("background","ff9");
   $('#bg').css("display","block");
  }
  function showDiv2() {
   $('#popDiv').removeClass().addClass("mydiv2").css("display","block").css("background","pink");
   $('#bg').css("display","block");
  }
  function closeDiv() {
   $('#popDiv').css("display","none");
   $('#bg').css("display","none");
  }
 </script>
</head>
<body onload="$('#bg').css('height',document.body.clientHeight).css('width',document.body.clientWidth); ">
 <div id="popDiv" class="mydiv" style="display: none;">
  动态弹出的层<br />
  动态弹层的内容<br />
  <a href="javascript:closeDiv()">关闭窗口</a></div>
 <div id="bg" class="bg" style="display: none;">
 </div>
 <div style="height: 1400px;">
  <div style="text-align: center;">
   <a href="javascript:showDiv()">点我1</a><br/><br/>
   <a href="javascript:showDiv2()">点我2</a>
   </div>
 </div>
</body>
</html>

jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。

图片 2

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

我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方 法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法 在之前的文章中已经出现过了,相信大家很快便能掌握。当然,本篇后半部分会对jQuery.ajax()方法做非常具体的说明,因为它是本篇的重中之重。

图片 3

您可能感兴趣的文章:

  • jQuery实现form表单基于ajax无刷新提交方法详解
  • JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)
  • jQuery实现ajax调用WCF服务的方法(附带demo下载)
  • jQuery学习笔记之Ajax用法实例详解
  • Jquery操作Ajax方法小结
  • 谈谈jQuery Ajax用法详解
  • jQuery使用$.ajax进行即时验证的方法

以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax().

您可能感兴趣的文章:

  • javascript实现图片跟随鼠标移动效果的方法
  • js实现简单鼠标跟随效果的方法
  • js实现文字跟随鼠标移动而移动的方法
  • javascript DIV跟随鼠标移动
  • javascript跟随鼠标的文字带滚动效果
  • javascript跟随鼠标x,y坐标移动的字效果
  • Js鼠标跟随代码小手点击实例方法
  • js实现的跟随鼠标移动的时钟效果(中英文日期显示)
  • JavaScript实现文字跟随鼠标特效
  • js实现鼠标跟随运动效果

1.load(url,[data],[callback])

载入远程HTML文件代码并插入至DOM中,默认使用GET方式,传递参数时自动转换为POST方式。

◦url:要载入的远程url地址
◦data:发送至服务器的key/value 数据
◦callback:载入成功时的回调函数

示例代码如下:

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

这里将显示加载的文件的内容Load

2.jQuery.get(url, [data], [callback])

使用get方式从服务器端获取数据。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:jQuery实现的AJAX简单弹出层效果代码,js图片跟随

关键词: 老虎机送彩金