偶遇,侧边栏拖拽式效果,用最少的代码实现

福尔摩斯对我笑 2019-02-18 31116 次 2512条

<html>
<head>
<meta charset="utf-8">
<title>echarts使用一</title>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/china-city.js"></script>

</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 100%;height:1000px;"></div>

<div id="onlineInfo">
    <h3>Pages</h3>
    <ul>
        <li>xxxxxxxxx</li>
        <li>xxxxxxxxxxxxxx</li>
    </ul>
</div>

<script>



 window.onload = function()
 {
  var div1 = document.getElementById("onlineInfo");
  div1.onmousedown = function(ev){
    var oevent = ev || event;

    var distanceX = oevent.clientX - div1.offsetLeft;
    var distanceY = oevent.clientY - div1.offsetTop;

    document.onmousemove = function(ev){
      var oevent = ev || event;
      div1.style.left = oevent.clientX - distanceX + 'px';
      div1.style.top = oevent.clientY - distanceY + 'px'; 
    };
    document.onmouseup = function(){
      document.onmousemove = null;
      document.onmouseup = null;
    };
  
         }
}

</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #onlineInfo{
        border:1px solid #cdcdcd;
        background-color: #3e3e3e;
        padding: 10px;
        position: absolute;
        top: 18%;
        right: 2%;
        border-radius: 4px;
    }

    #onlineInfo h3{
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        border-radius: 4px;
        background-color: #323232;
        color: #f1f1f1;
        padding: 4px 0;
    }
    #onlineInfo ul {
        background-color: #1d1d1d;
        max-width: 200px;
        word-break: break-all;
    }
    #onlineInfo ul li{
        list-style-type: none;
        padding: 0 4px;
        color: #fff;
        line-height: 30px;
        font-size: 16px;
    }


</style>
</body>
</html>
JS Bin on jsbin.com
标签:

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 2512 条评论 1


  1. birkin bag

    I enjoy you because of all your valuable work on this blog. My daughter takes pleasure in going through research and it is obvious why. All of us know all concerning the powerful tactic you convey invaluable strategies through the web site and as well improve participation from some other people on the matter and our simple princess is actually being taught a lot of things. Take advantage of the remaining portion of the year. You are doing a powerful job.

    回复 2019年10月17日
  2. off white shoes

    I precisely wished to say thanks once again. I do not know what I could possibly have worked on without the smart ideas contributed by you directly on my industry. It truly was a very challenging situation in my position, however , seeing a new expert approach you handled the issue forced me to jump for fulfillment. I am happier for this guidance and as well , pray you find out what an amazing job you are accomplishing teaching people today through the use of your site. I’m certain you’ve never encountered all of us.

    回复 2019年10月16日
  3. jordan 11

    I am commenting to make you understand of the great discovery my cousin’s daughter found visiting your web page. She figured out a lot of pieces, which include what it’s like to possess a wonderful teaching character to let folks really easily grasp various tortuous subject areas. You undoubtedly exceeded people’s desires. Thank you for giving these useful, trustworthy, informative as well as easy guidance on the topic to Mary.

    回复 2019年10月16日
  4. jordan 4

    Thanks for each of your hard work on this site. My aunt take interest in conducting internet research and it’s obvious why. All of us notice all relating to the lively method you present sensible things via the website and as well welcome contribution from visitors about this topic while our girl is undoubtedly discovering a lot. Have fun with the remaining portion of the new year. You have been doing a terrific job.

    回复 2019年10月15日
  5. timberland outlet

    Thank you so much for giving everyone such a memorable chance to read from here. It’s usually so fantastic and also jam-packed with fun for me personally and my office co-workers to search your site really 3 times in a week to read the new guides you have. Of course, I am certainly motivated with all the beautiful tactics served by you. Certain 2 areas in this posting are rather the finest we have ever had.

    回复 2019年10月14日
  6. curry 4

    I and also my buddies were following the excellent recommendations from your web page while quickly I got a terrible suspicion I had not expressed respect to the site owner for those secrets. All the women appeared to be certainly happy to see all of them and have in effect absolutely been making the most of them. We appreciate you simply being considerably thoughtful and for choosing this sort of superior subject matter most people are really wanting to be aware of. My sincere apologies for not expressing appreciation to you sooner.

    回复 2019年10月13日
  7. golden goose

    I wish to show some thanks to this writer just for bailing me out of this trouble. Just after looking through the the net and meeting thoughts which were not helpful, I figured my life was over. Existing without the approaches to the difficulties you have resolved as a result of the review is a crucial case, as well as the ones that might have badly affected my career if I hadn’t discovered your blog. Your main capability and kindness in playing with all the things was very useful. I am not sure what I would have done if I had not discovered such a step like this. I can at this moment look forward to my future. Thanks for your time very much for the specialized and sensible help. I won’t think twice to refer the sites to any person who requires tips on this situation.

    回复 2019年10月12日
  8. nike vapormax

    My spouse and i have been now cheerful that Louis managed to finish up his survey through the entire ideas he got through the web site. It is now and again perplexing just to always be freely giving strategies that people have been making money from. And now we keep in mind we have got you to thank for this. The main illustrations you’ve made, the straightforward site navigation, the relationships your site help to instill – it is everything sensational, and it’s really making our son in addition to our family recognize that this issue is pleasurable, and that is rather pressing. Thank you for the whole lot!

    回复 2019年10月11日
  9. jordan shoes

    My wife and i felt really contented when John managed to finish off his inquiry through the precious recommendations he came across while using the site. It’s not at all simplistic just to happen to be making a gift of points which usually many people have been trying to sell. And we grasp we need the blog owner to be grateful to for this. Those explanations you have made, the straightforward web site navigation, the friendships you will give support to engender – it’s everything unbelievable, and it’s really letting our son in addition to the family consider that the idea is brilliant, which is rather essential. Thanks for the whole thing!

    回复 2019年10月10日
  10. yeezy 500

    I’m just writing to let you be aware of what a remarkable experience my cousin’s princess enjoyed viewing your webblog. She discovered some details, most notably what it’s like to have an excellent helping nature to let many people clearly understand selected specialized subject areas. You really did more than visitors’ expectations. Thanks for coming up with the informative, dependable, informative and as well as unique guidance on that topic to Jane.

    回复 2019年10月9日
  11. fila

    I have to convey my admiration for your kind-heartedness in support of individuals who require guidance on this topic. Your very own commitment to getting the message around had been exceedingly effective and has encouraged associates much like me to realize their pursuits. This informative information implies a lot a person like me and further more to my office colleagues. Regards; from all of us.

    回复 2019年10月8日
  12. curry 6

    I in addition to my guys appeared to be analyzing the great things found on your web site then then I had an awful feeling I had not thanked the web site owner for those techniques. These people had been certainly joyful to study them and have absolutely been making the most of them. Appreciation for genuinely indeed considerate and then for having variety of excellent ideas millions of individuals are really needing to discover. My personal honest apologies for not saying thanks to you earlier.

    回复 2019年10月8日