技术文章
当前位置:首页 > jQuery技术文章 > jQuery简单实现中间浮窗效果

jQuery中间浮窗效果实现代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:91

这篇文章主要知识点是关于jQuery、浮窗效果、jQuery实现页面下拉100像素出现悬浮窗口的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
  • 类型:前端开发大小:131.7 MB格式:PDF出版:电子工业出版社作者:李刚
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jQuery简单实现中间浮窗效果

本文实例讲述了jQuery简单实现中间浮窗效果。分享给大家供大家参考,具体如下:

basic.css:

/*
* -- 样式说明 --
* 最大优先实现法,全局能实现不用区域,区域能实现不用模板,模板能实现不用界面,界面能实现不用标签
* g - 全局
* t - 区域
* m - 模板
* ui - 界面
* lb - 标签
* j - 脚本 只使用在有JS操作的样式
*/
/*公共样式*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:Helvetica,Tahoma,Arial,sans-serif; color:#333; font-size:16px; background-color:#fff;}
input, select, textarea{ font-family:Helvetica,Tahoma,Arial,sans-serif; background:#fff; margin:0; padding:0; outline:none;}
textarea{ resize:none;}
img{ border:none;}
i, em{ font-style:normal;}
ul li{ list-style-type:none;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#06f; text-decoration:underline;}
/*全局样式*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ clear:both;}

index.html:

<!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>中间浮窗</title>
<link href="css/basic.css" rel="stylesheet">
<script src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div ></div>
<style type="text/css">
/*建议先隐藏浮窗的样式 display:none*/
.j-fixcenter{ height:120px; width:219px; background:#f60; display:none; position:fixed; }
</style>
<div id="fixCenter" class="j-fixcenter">
  <img src="img/fixCenter.jpg" width="219" height="120" usemap="#fixCenterMap">
  <!--绘制地图,把图片哪个位置要点击的绘制出来-->
  <map name="fixCenterMap" id="fixCenterMap">
    <area shape="rect" coords="175,0,219,30" href="javascript:void();" id="closeFixCenter" />
    <area shape="rect" coords="0,30,219,94" href ="###2" />
    <area shape="rect" coords="0,94,219,120" href ="###3" />
  </map>
</div>
<script type="text/javascript">
$(function(){
  //调用浮窗方法
  fixCenter();
});
//当调整浏览器窗口的大小时,发生 resize 事件
$(window).resize(function(){
  //重置浮窗定位
  fixCenterGetPosition();
});
function fixCenter(){
  //获取浮窗定位
  fixCenterGetPosition();
  //获取在浮窗的元素ID
  var fid = $("#fixCenter");
  //渐变显示元素
  fid.fadeIn(600);
  //关闭按钮的点击事件
  $("#closeFixCenter").click(function(){
    //渐变隐藏元素,三秒后重新显示
    fid.fadeOut(600).delay(3000).fadeIn(600);
  });
}
function fixCenterGetPosition(){
  var fid = $("#fixCenter");
  //获取当前窗口的高度
  var h = $(window).height();
  //获取当前窗口的宽度
  var w = $(window).width();
  //计算要定位左侧距离
  var left = (w/2) - parseInt(fid.css("width")) / 2;
  //计算要定位上侧距离
  var top = (h/2) - parseInt(fid.css("height")) / 2;
  //设置定位距离的样式
  fid.css({"left":(left) + "px", "top": (top) + "px" });
}
</script>
</body>
</html>

效果图:

jQuery简单实现中间浮窗效果

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

jQuery实现页面下拉100像素出现悬浮窗口的方法

本文实例讲述了jQuery实现页面下拉100像素出现悬浮窗口的方法。分享给大家供大家参考,具体如下:

<!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>JS 页面下拉100像素出现悬浮窗口</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div ></div>
<style type="text/css">
.fdPhone{position:fixed; _position:absolute; width:320px; height:50px; position:fixed; left:50%; margin-left:-160px; top:0px; display:none;}
</style>
<div class="fdPhone">
<a href="tel:123456789" target="_blank"><img src="images/phone.gif" width="320" height="50"></a>
</div>
<script type="text/javascript">
$(function(){
  $(window).scroll(function() {
    if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时,即出现浮窗~
      $('.fdPhone').fadeIn(300); //浮窗淡入的时间,越小出现的越快~
    }else{
      $('.fdPhone').fadeOut(300); //浮窗淡出的时间,越小消失的越快~
    }
  });
  $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //浮窗动画停留时间,越小消失的越快~
});
</script>
</body>
</html>

效果图:

jQuery实现页面下拉100像素出现悬浮窗口的方法

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

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

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到同域jQuery(跨)iframe操作DO、 jQuery中Find选择器的用法和、 jquery点击元素后滚动条滚、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery日期范围选择器实例代码详解

下一篇:JQuery循环滚动文字图片实例代码

展开 +

收起 -

jQuery效果 相关电子书
学习笔记
网友NO.642489

jQuery基于ajax实现带动画效果无刷新柱状图投票代码

本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码。分享给大家供大家参考。具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节。如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果。 运行效果截图如下: 具体代码如下: !DOCTYPE htmlhtmlheadtitlejQuery ajax投票特效,带动画效果 柱状图/titlescript type="text/javascript" src="jquery-1.6.2.min.js"/scriptscript type="text/javascript"$(document).ready(function() { $("#container div a").click(function() { $(this).parent().animate({ width: '+=100px' }, 500); $(this).prev().html(parseInt($(this).prev().html()) + 1); return false; });});/scriptstyle type="text/css"* { font-family: Arial, "Free Sans";}#container { margin……

网友NO.411736

jQuery动态添加.active 实现导航效果代码思路详解

代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接 window.location.pathname ; 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后。。就没有然后了。。。 jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i li.length; i++) { var url = window.location.pathname; var url = url.replace("/", ""); if (url.indexOf(li[i].id)!=-1) { li[i].firstChild.className = "active"; } else { li[i].firstChild.className = ""; } }}) html代码: bodydiv class="title" ul class="title_ul" li id="index"a href="index.html" rel="external nofollow" class=""页面1/a/li li id="zf"a href="zf.html" rel="external nofollow" class=""页面2/a/li li id="gc"a href="gc.html" rel="external nofollow" class=""页面3/a/li li id="hc"a href="hc.html" rel="external nofollow" class=""页面4/a/li li id="shwt"a href="shwt.html" rel="external nofollow" cl……

网友NO.654545

用户管理的设计_jquery的ajax实现二级联动效果

页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID":jct},function(data,textStatus){ //先删除单位名称的下拉菜单,但是请选择要留下 $("#jctUnitID option").remove(); if(data!=null data.length0){ for(var i=0;idata.length;i++){ var ddlCode = data[i].ddlCode; var ddlName = data[i].ddlName; //添加到单位名称的下拉菜单中 var $option = $("option/option"); $option.attr("value",ddlCode); $option.text(ddlName); $("#jctUnitID").append($option); } } }); } 3.在Action类中定义findJctUnit()方法,这里要将返回的List集合放置到栈顶,struts2将其转换成json数据 /** * @Name: findJctUnit * @Description: 使用jquery的ajax完成二级联……

网友NO.948039

jQuery中常用动画效果函数知识点整理

jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画。 clearQueue():对被选元素移除所有排队的函数(仍未运行的)。 delay():对被选元素的所有排队函数(仍未运行)设置延迟。 dequeue():运行被选元素的下一个排队函数。 fadeln():逐渐改变被选元素的不透明度,从隐藏到可见。 fadeOut():逐渐改变被元素的不透明度,从可见到隐藏。 fadeTo():把被选元素逐渐改变至给定的不透明度。 hide():隐藏被选的元素。 queue():显示被选元素的排队函数。 show():显示被选的元素。 slideDown():通过调整高度来滑动显示被选元素。 slideToggle():对被选元素进行滑动隐藏和滑动显示的切换。 slideUp():通过调整高度来滑动隐藏被选元素。 stop():停止在被选元素上运行的动画。 toggle():对被选元素进行隐藏和显示的切换。 animate(): animate() 方法执行 CSS 属性集的自定义动画。……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息