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

福尔摩斯对我笑 2019-02-18 2169 次 150条

<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
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


已有 150 条评论 1


  1. adidas gazelle sale

    A lot of thanks for your entire hard work on this site. My mum takes pleasure in engaging in investigations and it’s really obvious why. A number of us hear all regarding the dynamic mode you give both useful and interesting steps by means of this blog and in addition boost participation from other ones on this area of interest while our favorite simple princess has been learning a lot. Enjoy the rest of the new year. Your performing a dazzling job.

    回复 2020年2月26日
  2. calvin klein outlet

    I have to express some thanks to this writer just for rescuing me from such a issue. Because of looking throughout the world-wide-web and seeing basics which are not helpful, I believed my life was well over. Being alive without the answers to the difficulties you’ve sorted out by way of your main guide is a critical case, as well as those which might have in a negative way affected my entire career if I had not discovered the website. Your personal expertise and kindness in controlling the whole thing was valuable. I am not sure what I would’ve done if I had not come upon such a subject like this. It’s possible to now look forward to my future. Thanks very much for this expert and effective help. I won’t hesitate to recommend your web blog to any individual who would need recommendations on this subject.

    回复 2020年2月24日
  3. Kiacycle 回复 2020年2月23日
  4. jordan sneakers

    I and also my friends were found to be examining the best advice found on your site then all of a sudden I had a horrible suspicion I had not expressed respect to the site owner for those techniques. The people appeared to be totally happy to learn them and have actually been using those things. Thanks for simply being considerably kind as well as for picking certain great things millions of individuals are really eager to learn about. My very own sincere regret for not saying thanks to sooner.

    回复 2020年2月20日
  5. Kimcycle 回复 2020年2月18日
  6. coach outlet

    I wish to express my respect for your generosity for individuals who must have help with this idea. Your very own commitment to getting the message all through has been exceedingly advantageous and have surely made most people much like me to attain their dreams. The informative report entails a lot a person like me and still more to my peers. Thanks a ton; from all of us.

    回复 2020年2月16日
  7. ig

    Hello There. I discovered your weblog the use of msn. This
    is a very well written article. I will make sure to
    bookmark it and come back to read more of your helpful information. Thank you
    for the post. I’ll certainly comeback.

    回复 2020年2月14日
  8. Tina

    My partner and I absolutely love your blog
    and find most of your post’s to be precisely what
    I’m looking for. Does one offer guest writers to write content for
    you? I wouldn’t mind producing a post or elaborating
    on a number of the subjects you write about here.
    Again, awesome weblog!

    回复 2020年2月14日
  9. http://par.medio.pro

    It’s an remarkable article in favor of all the internet visitors;
    they will obtain benefit from it I am sure.

    回复 2020年2月12日
  10. http://api.perception-point.io/api/url_redirect/go/?url=https://vimeo.com/brookwoodcamps

    May I simply say what a comfort to discover somebody who actually knows what they are talking about over the internet.
    You definitely realize how to bring an issue to light and make it important.
    More and more people should look at this and understand this side
    of your story. I can’t believe you aren’t more
    popular because you certainly have the gift.

    回复 2020年2月12日
  11. yeezy shoes

    I’m just commenting to let you be aware of what a excellent discovery my cousin’s daughter developed reading your site. She realized numerous things, not to mention what it is like to possess an incredible coaching nature to have folks very easily understand chosen complicated issues. You undoubtedly did more than her desires. Thanks for supplying those valuable, healthy, explanatory and even easy thoughts on your topic to Evelyn.

    回复 2020年2月11日
  12. Mittie

    Aw, this was an extremely good post. Taking the time and actual effort to generate a really
    good article… but what can I say… I put things off a whole lot and never seem
    to get anything done.

    回复 2020年2月11日
  13. Lisacycle 回复 2020年2月11日
  14. home.labtoday.net

    It’s difficult to find well-informed people about this subject, however, you seem
    like you know what you’re talking about! Thanks

    回复 2020年2月10日
  15. kingslangley.2day.ws

    I am not sure where you are getting your information, but great topic.
    I needs to spend some time learning much more or understanding more.

    Thanks for magnificent information I was looking for this
    information for my mission.

    回复 2020年2月9日
  16. Josefina

    What’s up Dear, are you actually visiting this web site daily, if so then you will definitely get nice knowledge.

    回复 2020年2月9日
  17. http://physics.aps.org/

    You actually make it seem really easy along with your presentation however I find this topic to be really something that I believe I
    would never understand. It seems too complicated and very huge for me.
    I’m having a look ahead in your next put up, I will try to
    get the dangle of it!

    回复 2020年2月9日
  18. Latosha

    Wow, fantastic weblog layout! How lengthy have you ever been blogging for?
    you make running a blog look easy. The total glance of your site is excellent, as neatly as the
    content material!

    回复 2020年2月9日
  19. http://www.miet.ru/

    What a material of un-ambiguity and preserveness of precious knowledge regarding
    unpredicted feelings.

    回复 2020年2月8日
  20. www.indice.com

    I read this post completely about the resemblance of newest and earlier
    technologies, it’s remarkable article.

    回复 2020年2月8日
  21. adidas stan smith shoes

    I would like to express some appreciation to the writer for rescuing me from this type of problem. As a result of looking throughout the world-wide-web and meeting concepts which are not pleasant, I figured my life was over. Existing devoid of the answers to the problems you’ve solved as a result of your good write-up is a critical case, and the ones that might have negatively damaged my entire career if I hadn’t come across your blog. Your own personal knowledge and kindness in controlling all the stuff was very useful. I don’t know what I would have done if I had not discovered such a solution like this. It’s possible to at this time look ahead to my future. Thanks so much for your impressive and sensible guide. I won’t hesitate to suggest your web sites to anybody who will need tips about this matter.

    回复 2020年2月7日
  22. volgodonsk.pro

    Hey there this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.

    I’m starting a blog soon but have no coding skills so I
    wanted to get guidance from someone with experience.

    Any help would be greatly appreciated!

    回复 2020年2月6日
  23. balenciaga

    I have to express thanks to you for bailing me out of such a instance. Right after searching through the internet and obtaining basics which were not productive, I assumed my entire life was done. Existing without the presence of answers to the problems you’ve solved by way of your good write-up is a crucial case, and those which might have in a negative way affected my entire career if I hadn’t noticed your web blog. Your ability and kindness in touching all the details was vital. I’m not sure what I would’ve done if I had not come upon such a thing like this. I can also at this time look forward to my future. Thanks so much for the professional and effective help. I will not be reluctant to propose the sites to any individual who wants and needs guidelines about this matter.

    回复 2020年2月4日
  24. Lisacycle 回复 2020年2月1日
  25. ralph lauren uk

    I as well as my pals appeared to be taking note of the good tips and hints from your site while the sudden got an awful suspicion I never expressed respect to the web site owner for those strategies. My ladies are actually as a result very interested to study all of them and have certainly been enjoying them. I appreciate you for genuinely really kind and then for obtaining such fantastic resources millions of individuals are really desirous to be aware of. Our own sincere apologies for not saying thanks to sooner.

    回复 2020年1月31日
  26. Janecycle 回复 2020年1月29日
  27. supreme clothing

    I in addition to my buddies appeared to be following the excellent tips and tricks from the website while all of a sudden developed a horrible suspicion I had not expressed respect to the website owner for them. All of the men had been for that reason stimulated to study them and now have in actuality been tapping into these things. Many thanks for truly being really considerate and for figuring out these kinds of really good guides millions of individuals are really desperate to be informed on. My sincere apologies for not saying thanks to you sooner.

    回复 2020年1月28日
  28. Lisacycle 回复 2020年1月27日
  29. Janecycle 回复 2020年1月27日
  30. Kiacycle 回复 2020年1月26日
  31. Lisacycle 回复 2020年1月26日
  32. Kimcycle 回复 2020年1月25日
  33. lebron 15

    I would like to express my gratitude for your kind-heartedness giving support to people that require help on this particular idea. Your personal dedication to getting the message throughout became incredibly interesting and has usually helped people much like me to reach their endeavors. Your amazing warm and friendly information entails much to me and even further to my office workers. Thank you; from everyone of us.

    回复 2020年1月19日