jQuery实现底部浮动窗口效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了jQuery实现底部浮动窗口效果。分享给大家供大家参考,具体如下:

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style type="text/css">
#foot_tel { width:100%;height:43px; background:url(styles/js/swt/tel_bj_20131123.png) no-repeat center center;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
z-index: 10000; position:fixed; _position:absolute; bottom:0px; left:0px;}
#foot_telBox { margin:0px auto;width:1112px; z-index: 8999;height:43px; overflow:hidden;}
#foot_telBox li {list-style:none;}
#foot_telBox .tel_txt { border:0px; float:left; font-size:14px; line-height:22px; height:22px; color:#999999; background:none; margin:16px 10px 0 244px; width:160px;}
#foot_telBox .tel_sub { border:0px; float:left; height:25px; color:#0C6796; background: url(styles/js/swt/tel_sub.png) no-repeat; width:92px;cursor:pointer;margin-top: 14px;}
#qqzhenshi{float:left;margin-left: 35px;}
#qqzhenshi a{display: block; width: 135px; height: 20px; margin: 15px 0px 0px 0px;}
#foot_show { width:100%; height:140px; background: url(styles/js/swt/footAdd_bg.png);
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
z-index: 20; position:fixed; _position:absolute; bottom:-140px; left:0px;}
.foot_showBox{width:1000px;height:79px;margin:10px auto 0px auto;}
</style>
<div id="foot_swt">
  <div id="foot_tel">
    <div id="foot_telBox">
        <li style="float:left;">
          <input type="text" onclick="openOline();" value="在线问问医生" class="tel_txt" />
          <input type="button" value="" onclick="openOline();" class="tel_sub" />
        </li>
        <li id="qqzhenshi"><a href="###" target="_blank"></a></li>
        <li style="width: 422px; float: right;list-style: none;"><span style="float: left; padding-top: 14px; width:360px; text-align:left"><a style="display:block" href="###" target="_blank"><img src="styles/js/swt/anniu_20130627.gif"></a></span><span style="float:right;"><a href="#" target="_self"><img src="styles/js/swt/tel_s4.gif"></a></span></li>
    </div>
  </div>
  <div id="foot_show">
    <div class="foot_showBox"><img src="styles/js/swt/footAdd.png" alt="" border="0" usemap="#Mapfoot" />
      <map name="Mapfoot" id="Mapfoot">
        <area shape="rect" coords="640,10,891,288" href="###" target="_blank" />
      </map>
    </div>
  </div>
</div>
<script type="text/javascript">
$(function(){
  $('#foot_swt').mouseover(function(){
    $('#foot_show').stop().animate({'bottom':'0px'},'fast');
  })
  $('#foot_swt').mouseout(function(){
    $('#foot_show').stop().animate({'bottom':'-140px'},'fast');
  })
});
function openOline(){
  window.open("###", "_blank");
}
</script>

运行效果如下图:

jQuery实现底部浮动窗口效果

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

Javascript 相关文章推荐
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
为原生js Array增加each方法
Apr 07 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
详解Webpack多环境代码打包的方法
Aug 03 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
聊一聊Vue.js过渡效果
Sep 07 #Javascript
BootStrap中的表单大全
Sep 07 #Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 #Javascript
JavaScript 函数模式详解及示例
Sep 07 #Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 #Javascript
jquery validate表单验证插件
Sep 06 #Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 #Javascript
You might like
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
利用php生成验证码
2017/02/23 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python函数的5种参数详解
2017/02/24 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python异常处理例题整理
2019/07/07 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python requests模块cookie实例解析
2020/04/14 Python
python解释器安装教程的方法步骤
2020/07/02 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
幼儿园招生广告
2014/03/19 职场文书
技术股份合作协议书
2014/10/05 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
世界名著读书笔记
2015/06/25 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书