jQuery封装的屏幕居中提示信息代码,jQuery实现页面点击后退弹出提示框的方法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5自适应模板</title>
<script src="jquery-1.10.1.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
  <h3>阅谁问君诵,水落清香浮。</h3>
</body>
</html>

图片 1

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

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

本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果。分享给大家供大家参考。具体如下:

本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考,具体如下:

demo.js:

您可能感兴趣的文章:

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
  • jQuery获取选中内容及设置元素属性的方法
  • 基于jQuery的输入框在光标位置插入内容,
    并选中
  • jQuery实现页面点击后退弹出提示框的方法
  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
  • jquery删除提示框弹出是否删除对话框
  • Jquery实现鼠标移上弹出提示框、移出消失思路及代码
  • 漂亮的jquery提示效果(仿腾讯弹出层)
  • 基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
  • 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
  • jquery
    div提示框渐隐弹出与隐藏效果
  • jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

本文实例讲述了jQuery实现页面点击后退弹出提示框的方法。分享给大家供大家参考,具体如下:

具体代码如下:

您可能感兴趣的文章:

  • jQuery实现的简单提示信息插件
  • jQuery实现鼠标经过弹出提示信息的地图热点效果
  • jQuery实现鼠标悬停显示提示信息窗口的方法
  • jQuery实现鼠标经过提示信息的地图热点效果
  • jquery
    提示信息显示后自动消失的具体实现
  • qTip2
    精致的基于jQuery提示信息插件
  • jquery
    简短几句代码实现给元素动态添加及获取提示信息
  • 基于JQuery的浮动DIV显示提示信息并自动隐藏
  • JQuery浮动DIV提示信息并自动隐藏的代码
  • 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
  • 基于jquery的气泡提示效果
  • jQuery
    表单验证插件formValidation实现个性化错误提示
  • jquery删除提示框弹出是否删除对话框
  • Jquery实现搜索框提示功能示例代码

图片 2

运行效果截图如下:

function showLoad(tipInfo, type, autohide) {
  var pic = "";
  switch (type) {
    case 0: // loading
      pic = "./Images/loading.gif";
      break;
    case 1: // ok
      pic = "./Images/right.png";
      break;
    case 2: // error
      pic = "./Images/error.png";
      break;
    default: //其他任何值时
      pic = "./Images/loading.gif";
      break;
  }
  var eTip = document.createElement('div');
  eTip.setAttribute('id', 'tipDiv');
  eTip.style.display = 'none';
  eTip.style.width = '300px';
  eTip.style.height = '20px';
  eTip.style.padding = '5px 15px'
  eTip.innerHTML = "<img src=\"" + pic + "\" style=\"float:left;\" /> " + tipInfo + "";
  try {
    document.body.appendChild(eTip);
  } catch (e) { }
  $("#tipDiv").css({
    position: "absolute",
    border: "solid 0px #D1D1D1",
    left: ($(window).width() - $("#tipDiv").outerWidth()) / 2,
    top: ($(window).height() - $("#tipDiv").outerHeight()) / 2 + $(document).scrollTop()
  });
  $('#tipDiv').show();
  if (autohide == true) {
    $('#tipDiv').fadeOut(3000);
  }
}
function closeLoad() {
  $('#tipDiv').fadeOut();
}



<!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>
  <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#name").blur(function () {
        if ($(this).val() == "") {
          tip(this, "×请输入");
        } else {
          tip(this,"√输入正确");
        }
      })
    });
    function tip(o,tip) {
      var eTip = document.createElement("span");
      var objid = $(o).attr("id") + "_tipDiv";
      var value = $(o).val();
      //绝对路径
      var x = $(o).offset().top;
      var y = $(o).offset().left;
      var w = $(o).width();
      var h = $(o).height();
      eTip.setAttribute("id", objid);
      try {
        document.body.appendChild(eTip);
      } catch (e) { }
      $("#" + objid).hide();
      $("#" + objid).css({
        top: x,
        left: y + w + 10,
        height: h,
        position: "absolute",
        padding: "5px"
      });
      $("#" + objid).html(tip);
      $("#" + objid).show();
    }
  </script>
</head>
<body>
<br/><br/><br/><br/><br/>
 <input type="text" id="name" /><br/><br/><br/><br/>
 <input type="text" id="pwd" />
</body>
</html>

运行效果图如下:

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery地图热点效果-鼠标经过弹出提示信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
.map img { width:496px; height: 415px; }
.mapDiv { width:140px; height:61px; padding: 5px; color:#369; background: url('//files.jb51.net/file_images/article/201508/201587110632401.gif') no-repeat; position:absolute; display: none; word-break:break-all; }
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("area").each(function(){
   var $x=-70;
   var $y=-80; 
   var name=$(this).attr("alt"); 
   $(this).mouseover(function(e){
    var index_num=$(this).index();
    var dom="<div class='mapDiv'><p>提示消息</p></div>";
    $("body").append(dom);
    $(".name").text(name);
    $(".num").text(index_num)
    $(".mapDiv").css({
      top: (e.pageY + $y)+"px",
      left: (e.pageX + $x)+"px"
     }).show("fast");
   }).mouseout(function(){    
     $(".mapDiv").remove();
   }).mousemove(function(e){
     $(".mapDiv").css({
      top: (e.pageY + $y)+"px",
      left: (e.pageX + $x)+"px"
    })
   });
  });   
 })
</script>
</head>
<body>
<div class="map">
<img border="0" usemap="#Map" src="//files.jb51.net/file_images/article/201508/201587110854867.png" />
<map name="Map" id="Map">
 <area id="beijing" alt="北京" href="forum.php?gid=1" coords="354,140,380,153" shape="rect">
 <area id="shanghai" alt="上海" href="forum.php?gid=3" coords="434,246,462,259" shape="rect">
 <area id="tianjin" alt="天津" href="forum.php?gid=2" coords="382,168,408,180" shape="rect">
 <area id="chongqing" alt="重庆" href="forum.php?gid=4" coords="294,264,320,276" shape="rect">
 <area id="hebei" alt="河北" href="forum.php?gid=5" coords="347,174,374,186" shape="rect">
 <area id="shanxi" alt="山西" href="forum.php?gid=6" coords="322,186,348,198" shape="rect">
 <area id="neimenggu" alt="内蒙古" href="forum.php?gid=7" coords="349,110,388,124" shape="rect">
 <area id="liaoning" alt="辽宁" href="forum.php?gid=8" coords="406,128,432,140" shape="rect">
 <area id="jilin" alt="吉林" href="forum.php?gid=9" coords="427,101,454,115" shape="rect">
 <area id="heilongjiang" alt="黑龙江" href="forum.php?gid=10" coords="424,58,464,73" shape="rect">
 <area id="jiangsu" alt="江苏" href="forum.php?gid=11" coords="404,224,417,250" shape="rect">
 <area id="zhejiang" alt="浙江" href="forum.php?gid=12" coords="413,265,427,291" shape="rect">
 <area id="anhui" alt="安徽" href="forum.php?gid=13" coords="382,236,395,263" shape="rect">
 <area id="fujian" alt="福建" href="forum.php?gid=14" coords="399,300,413,327" shape="rect">
 <area id="jiangxi" alt="江西" href="forum.php?gid=15" coords="371,286,385,313" shape="rect">
 <area id="shandong" alt="山东" href="forum.php?gid=16" coords="373,196,399,208" shape="rect">
 <area id="henan" alt="河南" href="forum.php?gid=17" coords="337,228,364,239" shape="rect">
 <area id="hubei" alt="湖北" href="forum.php?gid=18" coords="329,258,356,271" shape="rect">
 <area id="hunan" alt="湖南" href="forum.php?gid=19" coords="325,294,352,306" shape="rect">
 <area id="guangdong" alt="广东" href="forum.php?gid=20" coords="356,343,382,355" shape="rect">
 <area id="guangxi" alt="广西" href="forum.php?gid=21" coords="302,343,328,355" shape="rect">
 <area id="hainan" alt="海南" href="forum.php?gid=22" coords="313,398,340,411" shape="rect">
 <area id="sichuan" alt="四川" href="forum.php?gid=23" coords="239,265,265,277" shape="rect">
 <area id="guizhou" alt="贵州" href="forum.php?gid=24" coords="283,311,308,324" shape="rect">
 <area id="yunnan" alt="云南" href="forum.php?gid=25" coords="225,337,251,349" shape="rect">
 <area id="shaanxi" alt="陕西" href="forum.php?gid=26" coords="303,224,316,251" shape="rect">
 <area id="gansu" alt="甘肃" href="forum.php?gid=27" coords="179,156,205,168" shape="rect">
 <area id="qinghai" alt="青海" href="forum.php?gid=28" coords="174,206,200,218" shape="rect">
 <area id="ningxia" alt="宁夏" href="forum.php?gid=29" coords="277,188,290,212" shape="rect">
 <area id="xinjiang" alt="新疆" href="forum.php?gid=30" coords="85,140,111,152" shape="rect">
 <area id="xizang" alt="西藏" href="forum.php?gid=31" coords="87,249,113,261" shape="rect">
 <area id="xianggang" alt="香港" href="forum.php?gid=32" coords="379,358,406,370" shape="rect">
 <area id="aomen" alt="澳门" href="forum.php?gid=33" coords="349,371,375,383" shape="rect">
 <area id="taiwan" alt="台湾" href="forum.php?gid=34" coords="434,322,448,348" shape="rect">
</map>
</div>
</body>
</html>

demo.html:

这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢。

jQuery(document).ready(function ($) {
  if (window.history && window.history.pushState) {
    $(window).on('popstate', function () {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];
      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
          alert("希望该网站能提供你帮助!");
        }
      }
    });
    window.history.pushState('forward', null, './#forward');
  }
});

您可能感兴趣的文章:

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
  • jQuery获取选中内容及设置元素属性的方法
  • 基于jQuery的输入框在光标位置插入内容,
    并选中
  • jQuery实现鼠标经过弹出提示信息的地图热点效果
  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
  • jquery删除提示框弹出是否删除对话框
  • Jquery实现鼠标移上弹出提示框、移出消失思路及代码
  • 漂亮的jquery提示效果(仿腾讯弹出层)
  • 基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
  • 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
  • jquery
    div提示框渐隐弹出与隐藏效果
  • jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】