`

JS 底部的浮动窗口

阅读更多
<script type="text/javascript" src="styles/js/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>

 

效果图:

 

 

  • 大小: 27.5 KB
1
1
分享到:
评论

相关推荐

    客服QQ浮动窗口

    在这个客服QQ浮动窗口的实现中,JavaScript负责处理浮动窗口的显示、隐藏、跟随滚动等功能。例如,可以使用JavaScript监听滚动事件,当用户滚动页面时,浮动窗口会保持在屏幕的固定位置,确保始终可见。同时,...

    QQ在线浮动窗口插件,asp版

    接下来,`jqqonline.js`是JavaScript文件,它是实现QQ在线浮动窗口功能的核心。JavaScript是一种广泛应用于客户端的编程语言,负责处理浏览器端的交互逻辑。在这个插件中,`jqqonline.js`可能包含了检查QQ在线状态的...

    浮动窗口

    浮动窗口在IT行业中通常指的是那些在用户界面中可以自由移动、不会被其他元素遮挡的窗口组件,常见于各种软件和网页设计中。这种技术在实现动态广告、通知提示、设置面板等方面非常实用。在本篇文章中,我们将深入...

    jQuery实现底部浮动窗口效果

    首先,我们来看下实现底部浮动窗口所需的一些基础知识点。 1. **jQuery选择器**:jQuery选择器用于选取HTML元素,返回匹配选择器的元素集合,我们可以用它来为页面元素绑定事件和进行样式更改。 2. **事件处理**:...

    新浪奥运频道的Js右下角浮动窗口代码

    总的来说,新浪奥运频道的Js右下角浮动窗口代码是通过结合HTML、CSS和JavaScript实现的一种动态效果,它提升了用户在浏览网页时获取实时信息的便捷性。通过学习和理解这一技术,开发者可以为自己的项目增添类似的...

    新浪奥运频道的Js右下角浮动窗口代码打包

    新浪奥运频道的Js右下角浮动窗口代码打包主要涉及到JavaScript这一编程语言,特别是与网页动态效果和用户体验相关的技术。JavaScript是一种轻量级的解释型编程语言,广泛应用于Web开发,用于实现网页的交互性和动态...

    网页底部浮动导航条

    网页底部浮动导航条是网页设计中的一个重要元素,它通常位于页面的最下方,始终保持在用户的视线范围内,即使用户滚动页面也不会消失。这种设计可以提供便捷的用户体验,使用户能够快速访问网站的主要链接或功能,...

    JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    - JS实现交互:利用JavaScript对浮动窗口的行为进行控制,包括窗口的打开、关闭、最小化、最大化等操作。这通常涉及到监听用户的点击、拖拽等事件,并对窗口的属性(如CSS的left、top、width、height等)进行动态...

    广告代码网站底部浮动弹出

    在网页设计中,"广告代码网站底部浮动弹出"是一种常见的广告展示形式,它通常用于在用户浏览页面时,从页面底部以浮动的方式弹出广告、提示信息或视频内容。这种设计可以吸引用户的注意力,同时不会完全遮挡主要内容...

    qq客服浮动窗口(里面有4中样式)

    - 设计时应考虑浮动窗口的位置,一般在页面边缘或者底部,不影响主要内容的阅读。 - 窗口的大小应适中,既能展示必要的信息,又不会过于占屏。 - 配色需与网站整体色调协调,确保视觉一致性。 - 提供关闭按钮,...

    jQuery网页底部阴影浮动层文字滚动

    浮动层的位置通过`position: fixed`固定,使其始终位于浏览器窗口的底部。背景颜色可以根据设计需求进行调整。 接下来是文字滚动的效果。jQuery提供了许多动画方法,如`slideUp()`, `slideDown()`, `fadeIn()`, `...

    网页底部浮动通栏、导航条

    总的来说,创建网页底部浮动通栏和导航条需要结合HTML结构、CSS样式和可能的JavaScript交互。设计时应考虑响应式布局,确保在不同设备和屏幕尺寸上都能良好显示。理解并熟练运用这些技术,可以提升网页的用户体验,...

    jquery右下角浮动窗口广告代码

    在本案例中,"jquery右下角浮动窗口广告代码"指的是利用jQuery实现的一种广告展示方式,它会在网页的右下角创建一个浮动窗口,通常用于吸引用户注意力并展示推广信息。 这种广告设计的关键在于利用jQuery的动态效果...

    jQuery鼠标滚动条到页面底部浮动层滑动弹出信息

    在网页设计中,有时我们需要实现一种效果:当用户滚动页面至底部时,一个浮动层会自动弹出显示信息。这种功能常用于展示广告、提示消息或者加载更多内容等。jQuery库提供了一种简单且强大的方式来实现这样的交互效果...

    网页底部浮动通栏特效代码

    网页底部浮动通栏特效代码是一种常见的网页设计技术,主要用于创建在页面滚动时始终保持在屏幕底部的横幅或栏。这种效果常用于放置版权信息、联系方式、社交媒体图标等,确保用户在浏览网页时能轻松访问这些内容。...

    浮动代码 

    - **显示/隐藏**:你可能需要通过JavaScript来控制浮动窗口何时显示或隐藏,例如当用户滚动到页面的特定位置时。 - **响应式设计**:为了适应不同设备和屏幕尺寸,可能需要编写JavaScript来动态调整浮动窗口的位置...

    js浮动框示例

    总的来说,"js浮动框示例"是一个展示如何使用JavaScript、HTML和CSS实现交互式浮动信息窗口的例子。通过理解和实践这个示例,开发者可以掌握创建动态、可交互网页元素的技能,提升网站的用户体验。

    JavaScript 多级联动浮动菜单

    浮动菜单(Fixed Menu)则指的是菜单在页面滚动时始终保持在屏幕的某一位置,如顶部或底部,这样用户无需滚动回顶部就能访问导航。在CSS中,我们可以使用`position: fixed;`属性来实现这一效果。 接下来,我们来看...

    js固定在网站底部在线客服代码.zip

    1. **浮动元素定位**:JS代码会利用CSS样式和JavaScript事件监听来确保客服图标或按钮始终位于浏览器窗口的底部,即使用户滚动页面,客服窗口也会保持可见。这通常是通过设置元素的`position: fixed`属性实现的。 2...

Global site tag (gtag.js) - Google Analytics