js固定div在屏幕最右边

原创 2015年07月07日 14:06:30
<!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; }
.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>

相关文章推荐

Div固定在屏幕右边的指定位置

#divCollapse {     display:none;     bottom: 40px;     right: 3px;             /*举例右边3像素*/     ...

女神程序员的一天:暴力测试social爬虫代码

女神程序员的一天:暴力测试social爬虫代码 时间 2013-03-08 16:04:46  CSDN移动开发原文  http://www.csdn.net/article/2013-03-0...
  • TitiWy
  • TitiWy
  • 2015年02月15日 07:32
  • 856

用支付宝沙箱环境来做手机网页支付(C#)

1、首先在开发者中心来到沙箱应用中设置公钥和密钥 2、点击设置应用公钥,这里有密钥生成工具的下载链接 点击生成,私钥和公钥就自动生成好了,注意,这里生成的是RSA密钥,而不是RSA2的。然后将密钥...

js实现div固定在屏幕的某一个位置

要实现div块固定在屏幕的某一个位置可以使用js来实现,这个实现比较简单,下面来看下效果: 原理就是监听window对象的onscroll事件,获取鼠标移动了多少距离,然后给这个需要固定的di...

div左边固定、右边自适应 和 上边固定、下边自适应

在网页设计中,我经常遇到div一边固定、一边自适应的需求,在学习了关于CSS的一些书籍和网上的一些案例后,总结了两个例子,以便应对以后的不时之需。话不多说,直接看代码。 第一个,是div左边变化,右...

DIV固定屏幕

  • 2013年04月10日 17:28
  • 3KB
  • 下载

两个div右侧固定,左侧自适应屏幕

先上一张截图 再上代码 css: bigBox{margin:0;} .rightBox{position:fixed;right:0;top:200px;width:350px;height...

js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略!思路:         1.先将div设置为隐藏,style=”display:n...

"把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览

如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function(){},false); ...

左固定右边自适应框架

  • 2014年02月21日 16:59
  • 9KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js固定div在屏幕最右边
举报原因:
原因补充:

(最多只允许输入30个字)