我们专注孝感网站建设、孝感网站制作。
【电话：186 】
微信公众平台营销，本工作室专为地方商家打造的移动大数据下营销平台，具体请电话：
在现如今移动使用者越来越多，懒鸟工作室推出手机WEB端、移动APP（IPHONE、Android、WINDOWS）开发
400电话是一种主被叫分摊业务，即主叫承担市话接入费，被叫承担所有来电接听费用。目前已广泛用于多行业售前售后服务咨询方面。欢迎咨询我们开通。
CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
】 浏览:5344次
在项目中。为了解决多浏览器兼容的问题。。ie6很头痛。div经常出现浮动。。。。
然后在网上找了一个例子。。。。
css代码如下：
Java代码 &
body&{&background-image:url(text.txt);&&&&
background-attachment:&}&&
&#bottomNav&{&background-color:#096;&z-index:999;&position:&bottom:0;&left:0;&width:100%;&_position:&&&
&_top:&expression(documentElement.scrollTop&+&documentElement.clientHeight-this.offsetHeight);&&overflow:&}&&
html代码如下：
Java代码 &
&div&id=&bottomNav&&这里加入你的代码固定底部漂浮&/div&&&
再看看这些需要注意的地方：&
Java代码 &
_top:&expression(documentElement.scrollTop&+&documentElement.clientHeight-this.offsetHeight);&&&
看到&_top&是为IE6独家准备的，但是当我只加了上面这句时，IE6下拉动滚动条看到的这个漂浮物是抖动的-_-|||&解决方法我们为IE6添加这样一条语句：&&&
background-image:url(text.txt);&&
注意这里的&text.txt&其实不需要有这个txt文档，txt的文件名叫什么看自己喜好喽，如此一来我们就解决了IE6下的缓动问题。&&
PS:你可能会对 text.txt 和 expression 感到郁闷，也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法，当然这种方法在也会相应的改动下默认属性，可这种写法和之前网站融合起来很郁闷，要添加一个DIV（因为我之前没有在最外 层写DIV.wrap）。jquery配合css实现的悬浮提示效果
时间: 20:12
作者:admin
摘要 a 标签的titile属性能得到提示的效果，但是效果非常不好，而且当鼠标移动到提示信息上面的时候，提示信息就隐藏了，这篇文章主要解决以下几个问题： 当鼠标移到一个a标签之上的时候，能以淡出的方式显示提示信息， 当我将鼠标移动到提示信息的区域之上，提示
a 标签的titile属性能得到提示的效果，但是效果非常不好，而且当鼠标移动到提示信息上面的时候，提示信息就隐藏了，这篇文章主要解决以下几个问题：当鼠标移到一个a标签之上的时候，能以淡出的方式显示提示信息，当我将鼠标移动到提示信息的区域之上，提示信息继续保留，知道鼠标离开提示信息区域提示信息的显示位置是灵活的，能根据当前处罚事件的元素在页面的位置而智能的改变。比如当我鼠标移动到网页左上角的一个超链接上时，这个提示区域自动向下显示，以免隐藏在浏览器的边界之外。这里的难点在于第二和第三条，第二条主要通过定时器来实现，第三条则需要比较精细的判断。还有一个难点是提示区域的界面，要能在适当的位置显示提示的箭头，这个需要配合第三点的要求实现。先看js代码：/****
以下是悬浮提示效果的代码
$(document).ready(function() {
//初始化小名片
if( !element ){
element = $("&div/&")
.css({display:'none',position:'absolute','background-color':'white','z-index':1024})
.attr('id','space_card_content')
.appendTo(document.body).bind('mouseenter',function(){
clearTimeout( v );
}).bind('mouseleave',function(){
$(this).hide();
}).show();
var defaults = {
status: 'on',
//小名片模版
cardTpl:'&div class="card_layer"&&div class="bg"&&div class="effect"&'+
'&table&&tbody&&tr&&td&'+
'&div class="card_content"&'+
'&div class="card_name clearfix"&'+
'&div class="links clearfix" id="space_card_toolbar"&专业简介&/div&'+
'&dl class="name clearfix"&'+
'&dd class="major_detail"&'+
'&p&软件工程&/p&'+
'&p&计算机科学与技术&/p&'+
'&p&信息安全&/p&'+
'&p&数值分析&/p&'+
'&/td&&/tr&&/tbody&&/table&'+
'&div id="space_card_arrow" class="arrow arrow_b"&&/div&&/div&&/div&&/div&'
$("a[rel='face']").bind('mouseover',function(){
var width = $(this).width();
var height = $(this).height();
var position = $(this).offset();
position.width =
position.height =
t = setTimeout(function(){
//当需要ajax动态获取数据的时候，这个定时器才有用，不过本身还有延时的作用
clearTimeout( v );
$('#space_card_content').html(defaults['cardTpl']);
//alert($('#space_card_content').html());
//小名片的位置.在顶端朝下.在右侧朝左.
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
//当前元素距离顶部的距离
var cardTop = position.top - scrollT
//当前元素距离右侧的距离
var cardRight = windowWidth - position.
//设置小名片位置 - 朝左
if(cardRight&400) {
element.css({top:position.top + 145, left:position.left - 320}).show();
$('#space_card_arrow').removeClass('arrow_b').addClass('arrow_r');
//设置小名片位置 - 朝下
} else if (cardTop&900){
element.css({top:position.top +157 + position.height, left:position.left+5}).show();
$('#space_card_arrow').removeClass('arrow_b').addClass('arrow_t');
//设置小名片位置 - 朝上
element.css({top:position.top-43, left:position.left}).show();
$('#space_card_content').fadeIn("fast");
}).bind('mouseout',function(event){
clearTimeout(t);
v = setTimeout(function(){
element.hide();
这里特别要注意setTimeout的用法，每个setTimeout都是不能少的。否则会出现功能上的欠缺。 要完整显示出效果来，还需要配上css样式，本来需要加载一张箭头的图片，这里就不放上来了，不过还是保留了这张图片的css样式。&style type="text/css"&
.card_layer .card_content {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #BBB;
border-radius: 3px 3px 3px 3
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
width: 350
.card_layer {
border-radius: 4px 4px 4px 4
color: #666666;
z-index: 9999;
.card_layer .bg {
border-radius: 4px 4px 4px 4
padding: 4
background-color: #F5F5F5;
border-collapse:
border-spacing: 0;
.clearfix:after {
content: ".";
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
.card_name {
color: #5D5D5D;
.card_name .name {
padding: 4px 15px 10
.card_name .name dt,.card_name .name dd,.card_name .info dt,.card_name .info dd
.card_name .userdata {
width: 200
list-style:
.card_name .userdata li {
margin-right: 10
text-align:
.card_name .links {
background-color: #f8f8f8;
line-height: 25
padding: 3px 10
text-align:
.card_layer .arrow,.card_layer .arrow_hui {
background: url("/webpage/web/education/images/banner/layer_arrow.png")
no-repeat scroll 0 0
.card_layer .arrow_r,.card_layer .arrow_l {
background-position: -11px -24
height: 16
.card_layer .arrow_l {
background-position: 0 -24
.card_layer .arrow_t,.card_layer .arrow_b {
background-position: 0 -1
height: 11
.card_layer .arrow_b {
background-position: 0 -11
bottom: -5
&/style&最后你还需要引入你的jquey包。本文的代码可以在这里下载
上一篇： 其实弹出框的实现非常的简单。网上有很多种类的弹出框，比如jquery ui 的dialog colorbox fancybox等。jquery ui的dialog是一个专业的对话框 而colorbox和fancybox则更适用于播放图片。你可以改造这两个box让他们更像一个对话框。 不过有时候觉得什么都用jqu
下一篇： 无意中发现的discuz论坛中那个“发布新贴”等下拉菜单很有点特色，自动选择向上或向下显示菜单内容，对避免被其它控件遮住也有很好的处理方法（iframe）。 现把整个代码提出来，只需将整个代码复制下来保存为html文件即可，所有需要的js都在其中了。你可以运星期一 多云 18～23℃
div固定悬浮（左侧、右侧、任意相对位置）
根据网上的一个右侧固定浮动div修改。兼容多浏览器。
&!DOCTYPE html&&html&&head&&script type=&text/javascript&&function scrollx(p) {&var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style,&if (o) {&&cssPub = &;position:&+(p.f&&!ie6?’fixed’:'absolute’)+&;&+(p.t!=undefined?’top:’+p.t+’’:'bottom:0;’);&&if (p.r != undefined && p.l == undefined) {&&&o.style.cssText += cssPub + (‘right:’+p.r+’’);&&} else {&&&o.style.cssText += cssPub + (‘margin-left:’+p.l+’’);&&}&&if(p.f&&ie6){&&&cssTop = ‘;top:expression(documentElement.scrollTop +’+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+’+ &px& );’;&&&cssRight = ‘;right:expression(documentElement.scrollright + ‘+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+’ + &px&)’;&&&if (p.r != undefined && p.l == undefined) {&&&&o.style.cssText += cssRight + cssT&&&} else {&&&&o.style.cssText += cssT&&&}&&&dd.style.cssText +=’;background-image: url(about:blank);background-attachment:’;&&}else{&&&if(!p.f){&&&&w.onresize = w.onscroll = function(){&&&&&clearInterval(timer);&&&&&timer = setInterval(function(){&&&&&&//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0&&&&&&var st = (dd.scrollTop||db.scrollTop),c;&&&&&&c = st – o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);&&&&&&if(c!=0){&&&&&&&o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c&0?-1:1) + ‘px’;&&&&&&}else{&&&&&&&clearInterval(timer);&&&&&&}&&&&&},10)&&&&}&&&}&&}&}}&/script&&/head&&body&&div style=&width:700 margin:0 height:1000 background:#ccc&&&&div id=&float_father&&相对固定&/div&&&div id=&float_father_2&&相对固定（动）&/div&&&p&测试内容&/p&&&p&测试内容&/p&&/div&&div id=&float_left&&左侧固定&/div&&div id=&float_right&&右侧固定&/div&&script type=&text/javascript&&//左右侧固定浮动的div建议放在html的最低部//右侧固定scrollx({id:’float_right’, r:0, t:200, f:1});//左侧固定scrollx({id:’float_left’, t:200, f:1});//相对父级相定固定scrollx({id:’float_father’, l:300, t:200, f:1});//页面滚动同时滚动固定对像scrollx({id:’float_father_2′, l:500, t:300, f:0});/*scrollx参数说明
id：浮动对象的idr：右边距（窗口右边距，不写为靠左浮动）l：左边距（距离父级对象的左边距） &r&和&l&只能有其中一个参数t：上边距（默认贴着底边，0是贴着顶边）f：1表示固定（不写或者0表示滚动）*/&/script&&/body&&/html&
系统学习js(7)
《JavaScript+DOM编程艺术》第四章 案例研究：JavaScript美术馆 (4.4)
childNodes / nodeType / nodeValue / firstChild / lastChild
公交 91 路车队打电话来了
终于有了下文。
91路车队的人在电话里说是估计要到年底才会全部换成那种比较大的新车子，目前是只有8辆新车子。
看来还是有望改观的，期待。。。
另外，上周在杭州网、新动网、19楼同步发了帖，反响强烈，尤其是杭州网上，很快就升到热帖了。
网络力量强大。
修改完善浮动js；
合并新增/修改交易单。
&历史上的今天：2014:&&2013:&&2012:&&2010:&&2009:&&2008:&&
上一篇：下一篇：如何将div固定在页面最顶部,最底部&兼容ie6
在IE6中是不能直接使用 position: 。需要一些 CSS Hack 来解决它。当然，IE6 的问题也不仅仅
元素固定在的底部和距离右边的20个像素：
& position:_position:
&bottom:0;
& right:5%;
& _bottom:
&&&_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
right 跟 left 属性可以用的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在
_position: 中的 _ 符号只有 IE6 才能识别，目的是为了区分其他浏览器。
上面的只是一个例子，下面的才是最重要的代码片段：
使元素固定在浏览器的顶部：
_position:
&_top:expression_r(eval_r(document.documentElement.scrollTop));
使元素固定在浏览器的底部：
_position:
&_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
这两段代码只能实现在最底部跟最顶部，你可以使用
_margin-top:10
_margin-bottom:10
修改其中的数值控制元素的位置。
position: 闪动问题
现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：
background-image:url(about:blank);
background-attachment:
其中 * 是给 IE6 识别的。
到此，IE6 的 position: 问题已经被解决了。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}