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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
告诉大家什么是JSON
Jun 10 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
js创建数组的简单方法
Jul 27 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php接口技术实例详解
2016/12/07 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
古汉语文学求职信范文
2014/03/16 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
社区服务活动报告
2015/02/05 职场文书
不同意离婚代理词
2015/05/23 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
使用CSS实现音波加载效果
2023/05/07 HTML / CSS