js固定div在屏幕最右边
2015-07-07 14:06
579 查看
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title>demo</title>
<link href="file/do1.css" rel="stylesheet" media="screen" type="text/css">
<script src="file/jquery-1.10.1.min.js"></script>
<script>
$(function(){
(function(){
//ie6特别处理
if( ![1,] && !new XMLHttpRequest()){
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2+ $(window).scrollTop()
});
});
}else{
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2
});
});
}
//over事件
$('.gzh').each(function(_index){
$(this).on({
mouseover:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','block'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','block');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
},
mouseout:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','none'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','none');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
}
})
})
})();
})
</script>
</head>
<body style="height:5000px;">
<div id="leftToolBar" class="leftToolBar">
<div id="gongzhonghao_wrap" class="gzh">
<div id="gongzhonghao" class="tooldiv" >
<img src="file/left_icon01.png" class="k_png">
<p>微信号</p>
<div style="display: none;" class="qr_tooldiv">
<img alt="" src="file/qr_home.png"><p>微信扫码，获取产品帮助</p>
</div>
<div style="display: none;" class="qt_tooldiv">
<img alt="" src="file/qt_home.png">
<p>微信扫码，加入微信交流群</p>
</div>
</div>
</div>
<div id="gongzhonghao2_wrap" class="gzh">
<div id="gongzhonghao2">
<div class="tooldiv">
<img title="" alt="" src="file/left_icon02.png" class="k_png">
<p>用户QQ群</p>
</div>
<div style="display:none" class="qr_tooldiv2">
<div>请加企微产品咨询群</div>
<div class="qq1"><p>群10：<a target="_blank" href="file/group.png" alt="" title="" border="0"></a></p><span>群10: 459020424</span></div>
<div class="qq1"><p>群9：467665662（已满）</p></div>
<div class="qq1"><p>群8：263463（已满）</p></div>
<div class="qq1"><p>群7：417040（已满）</p></div>
<div class="qq1"><p>群6：245576542（已满）</p></div>
<div class="qq1"><p>群5：437937934（已满）</p></div>
<div class="qq1"><p>群4：57650844（已满）</p></div>
<div class="qq1"><p>群3：154835442（已满）</p></div>
<div class="qq1"><p>群2：220629533（已满）</p></div>
<div class="qq1"><p>群1：53863114（已满）</p></div>
</div></div></div>
</body></html>
<style>
body,ul,li,ol,p,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }
body{ font-size: 14px; font-family:Arial,"Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif; line-height: 1.5; color: #666666; word-break: normal; word-wrap: break-word; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; }
ol,ul { list-style: none; }
img{ border:none; max-width: 100%; }
a{ text-decoration: none; color: #666; outline: none; }
a:hover,a:focus{ outline: none; }
ul.nav { margin-top: 10px; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/*在线客服*/
.leftToolBar { position: fixed; _position:absolute; right: 5px; top:0; }
.tooldiv { background: none repeat scroll 0 0 #1f96b8; border-bottom-left-radius: 10px; border-top-left-radius: 10px; color: #ffffff; cursor: pointer; height: auto; margin-bottom: 10px; position: relative; text-align: center; width: 85px; }
.leftToolBar a { color: #f87b00; }
.qr_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 10px; bottom: 0; color: #666; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #000}
.leftToolBar .qr_tooldiv2 { background: none repeat scroll 0 0 #fdfdfd; border-radius: 5px; box-shadow: 0 0 8px #ccc; color: #333333; left: -207px; position: absolute; top: -170px; padding: 15px; }
.qt_tooldiv > img,.qr_tooldiv > img{ width: 190px; height: 190px; }
.leftToolBar p { margin: -5px 0 0 0; }
.qt_tooldiv,.qr_tooldiv,.qr_tooldiv2{ border-radius: 5px; color: #666; padding: 10px; margin: 5px 0; box-shadow: 0 0 8px #ccc; border: 1px solid #ccc}
#gongzhonghao, #gongzhonghao2{ border-radius:0; width: 80px; padding: 10px 0; font-size:12px; }
.tooldiv{ width: 100%; background:none; }
.qq1,.qq3 { clear: both; margin-top: 5px; }
.qq1 > p { font-size: 14px; height: 25px; line-height: 25px; margin: 0; vertical-align: top; }
.qq1 img { vertical-align: middle; }
.qq1 > span,.qq2 > span,.qq3 > span{ color: #999; font-size: 12px; margin-left: 30px; }
.qq2 > p,.qq3 >p{ margin: 0; }
.qq2 img { vertical-align: middle; }
.qt_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 5px; top: 82px; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #ccc}
.e95e45{ color: #e95e45; }
#nav_wrap a.new span { background: none repeat scroll 0 0 red; border-radius: 3px; color: white; font-size: 10px; height: 18px; left: 18px; line-height: 18px; position: absolute; text-align: center; top: 17px; width: 36px; }
#nav_wrap a.new{ position: relative; padding-left: 50px; }
#navbar { background: none repeat scroll 0 0 #f8f8f8; border-radius: 0; position: fixed; top: 0; width: 100%; z-index: 10; }
ac24
.nav_fixed { position: fixed; top: 0; width: 100%; z-index: 9; }
#nav_wrap{ width: 100%; }
#gongzhonghao_wrap,#gongzhonghao2_wrap { width: 100px; background: url(../images/transparent.png) repeat; }
#gongzhonghao { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; cursor: pointer; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; }
#gongzhonghao2 { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; display: block; }
</style>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title>demo</title>
<link href="file/do1.css" rel="stylesheet" media="screen" type="text/css">
<script src="file/jquery-1.10.1.min.js"></script>
<script>
$(function(){
(function(){
//ie6特别处理
if( ![1,] && !new XMLHttpRequest()){
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2+ $(window).scrollTop()
});
});
}else{
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2
});
});
}
//over事件
$('.gzh').each(function(_index){
$(this).on({
mouseover:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','block'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','block');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
},
mouseout:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','none'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','none');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
}
})
})
})();
})
</script>
</head>
<body style="height:5000px;">
<div id="leftToolBar" class="leftToolBar">
<div id="gongzhonghao_wrap" class="gzh">
<div id="gongzhonghao" class="tooldiv" >
<img src="file/left_icon01.png" class="k_png">
<p>微信号</p>
<div style="display: none;" class="qr_tooldiv">
<img alt="" src="file/qr_home.png"><p>微信扫码，获取产品帮助</p>
</div>
<div style="display: none;" class="qt_tooldiv">
<img alt="" src="file/qt_home.png">
<p>微信扫码，加入微信交流群</p>
</div>
</div>
</div>
<div id="gongzhonghao2_wrap" class="gzh">
<div id="gongzhonghao2">
<div class="tooldiv">
<img title="" alt="" src="file/left_icon02.png" class="k_png">
<p>用户QQ群</p>
</div>
<div style="display:none" class="qr_tooldiv2">
<div>请加企微产品咨询群</div>
<div class="qq1"><p>群10：<a target="_blank" href="file/group.png" alt="" title="" border="0"></a></p><span>群10: 459020424</span></div>
<div class="qq1"><p>群9：467665662（已满）</p></div>
<div class="qq1"><p>群8：263463（已满）</p></div>
<div class="qq1"><p>群7：417040（已满）</p></div>
<div class="qq1"><p>群6：245576542（已满）</p></div>
<div class="qq1"><p>群5：437937934（已满）</p></div>
<div class="qq1"><p>群4：57650844（已满）</p></div>
<div class="qq1"><p>群3：154835442（已满）</p></div>
<div class="qq1"><p>群2：220629533（已满）</p></div>
<div class="qq1"><p>群1：53863114（已满）</p></div>
</div></div></div>
</body></html>
<style>
body,ul,li,ol,p,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }
body{ font-size: 14px; font-family:Arial,"Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif; line-height: 1.5; color: #666666; word-break: normal; word-wrap: break-word; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; }
ol,ul { list-style: none; }
img{ border:none; max-width: 100%; }
a{ text-decoration: none; color: #666; outline: none; }
a:hover,a:focus{ outline: none; }
ul.nav { margin-top: 10px; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/*在线客服*/
.leftToolBar { position: fixed; _position:absolute; right: 5px; top:0; }
.tooldiv { background: none repeat scroll 0 0 #1f96b8; border-bottom-left-radius: 10px; border-top-left-radius: 10px; color: #ffffff; cursor: pointer; height: auto; margin-bottom: 10px; position: relative; text-align: center; width: 85px; }
.leftToolBar a { color: #f87b00; }
.qr_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 10px; bottom: 0; color: #666; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #000}
.leftToolBar .qr_tooldiv2 { background: none repeat scroll 0 0 #fdfdfd; border-radius: 5px; box-shadow: 0 0 8px #ccc; color: #333333; left: -207px; position: absolute; top: -170px; padding: 15px; }
.qt_tooldiv > img,.qr_tooldiv > img{ width: 190px; height: 190px; }
.leftToolBar p { margin: -5px 0 0 0; }
.qt_tooldiv,.qr_tooldiv,.qr_tooldiv2{ border-radius: 5px; color: #666; padding: 10px; margin: 5px 0; box-shadow: 0 0 8px #ccc; border: 1px solid #ccc}
#gongzhonghao, #gongzhonghao2{ border-radius:0; width: 80px; padding: 10px 0; font-size:12px; }
.tooldiv{ width: 100%; background:none; }
.qq1,.qq3 { clear: both; margin-top: 5px; }
.qq1 > p { font-size: 14px; height: 25px; line-height: 25px; margin: 0; vertical-align: top; }
.qq1 img { vertical-align: middle; }
.qq1 > span,.qq2 > span,.qq3 > span{ color: #999; font-size: 12px; margin-left: 30px; }
.qq2 > p,.qq3 >p{ margin: 0; }
.qq2 img { vertical-align: middle; }
.qt_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 5px; top: 82px; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #ccc}
.e95e45{ color: #e95e45; }
#nav_wrap a.new span { background: none repeat scroll 0 0 red; border-radius: 3px; color: white; font-size: 10px; height: 18px; left: 18px; line-height: 18px; position: absolute; text-align: center; top: 17px; width: 36px; }
#nav_wrap a.new{ position: relative; padding-left: 50px; }
#navbar { background: none repeat scroll 0 0 #f8f8f8; border-radius: 0; position: fixed; top: 0; width: 100%; z-index: 10; }
ac24
.nav_fixed { position: fixed; top: 0; width: 100%; z-index: 9; }
#nav_wrap{ width: 100%; }
#gongzhonghao_wrap,#gongzhonghao2_wrap { width: 100px; background: url(../images/transparent.png) repeat; }
#gongzhonghao { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; cursor: pointer; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; }
#gongzhonghao2 { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; display: block; }
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js全屏
- js--关于点击的小知识 电脑版与手机
- Extjs给gridPanel添加单价双击事件和获取当前行的数据
- Extjs的radio单选框的使用
- javascript它【蛇系列】第一弹：简单的蛇实现
- javascript中的作用域
- [LeetCode][JavaScript]Implement Trie (Prefix Tree)
- 第六章 javaScript执行环境和作用域
- VS支持json后缀名的文件
- js中escape，encodeURI，encodeURIComponent区别
- javascript正则表达式（一）
- 理解JS中的prototype
- JSON对象转换成url参数
- Jq_javascript跨域问题
- js作用域详解
- 让jsp页面不缓存验证码图片。
- javascript数组排序汇总
- [TypeScript] JSON对象转TypeScript对象范例
- 理解 JavaScript 中的 Function.prototype.bind
- Js组件的一些写法