HTML
We hope that the suspension effect last load, it is generally placed at the end of the HTML page, we have established a .side-bar, which contains the online consultation, micro-channel (mouse slide effect pop-dimensional code), microblogging, and Email contact information and other content that we have to [a] label package.
<div class="side-bar">
<a href="#" class="icon-qq">Online consult</a>
<a href="#" class="icon-chat">Skype<div class="chat-tips"><i></i><img style="width:100px;height:100px;" src="goocode.png" alt=""></div></a>
<a target="_blank" href="#" class="icon-blog">Twitter</a>
<a href="#" class="icon-mail">Mail</a>
</div> CSS
We use CSS to complete the floating pop-up effect that is slid mouse. We prepare a picture right_bg.png, contains several elements of the icon, and then a corresponding content via background-position of each icon. We use position: fixed and set bottom and right values will .side-bar fixed to the lower right corner, so no matter how the page scrolling, .side-bar will remain unchanged in the lower right position. It should be mentioned under ie6 require separate treatment under the fixed effects, but the article does not explain, give up ie6.
.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;}
.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;}
.side-bar a:hover {background-color: #669fdd;}
.side-bar .icon-qq {background-position: 0 -62px;}
.side-bar .icon-chat {background-position: 0 -130px;position: relative;}
.side-bar .icon-blog {background-position: 0 -198px;}
.side-bar .icon-mail {background-position: 0 -266px;} There is also a micro-channel icon mouse slide effects, when mouse hover, .chat-tips display property set to block, and set the position location, the code also contains an arrow CSS wording:
.side-bar .icon-chat:hover .chat-tips {display: block;}
.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;}
.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;}
.chat-tips img {width: 138px;height: 138px;} A few simple lines of CSS code on the bottom right corner to complete a simple suspension effect, go and try it.
