Use jquery to make a floating toolbar instance share _jquery

Now when browsing the site, often find some floating bar, usually with the upward downward function, when you click, you can easily return to the top or to the bottom. In fact, it is not difficult to create such a tool sidebar, it is easy to use jquery to do it. Below, you follow my step, step by step, you can do it, and then you can according to this code, make some changes, customize something.

Don't say much nonsense, first of all I do this tool sidebar. The sidebar is in line with my own template "Q21", the Q21 template is black and white contrast, so this tool sidebar to highlight black and white changes. After the idea, I decided this sidebar style is this:

When the mouse is moved to the "Share" button, it automatically slips out of a black bar, and the black bar is the share button. For specific demo effects, you can download the last code package to view. Let's start with a step-by-step production.

Building HTML structure

The span tag is fine, but I still like to use Div, so I use DIV to build the HTML structure. The structure is very clear, a large div contains three small Div, is the next three buttons, where the Share button, also need to include a Div, to slide out the share button. Well, the structure is ready.

<div id= "tooltip" >
  <div id= "Toolt" >▲</div>
  <div id= "Toolc" >
    <div id= " Sharetxt "> Sharing </div>
    <div id=" Shareit "class=" None "> This is share code </div>
  </div>
  <div id= "Toolb" > </div>
</div>

Notice that the up and down button I'm using is the character, not the picture. If it is a picture, need to load, and dynamic changes, need to replace the picture more inconvenient. As for how to play this up and down two triangle, rely on your Sogou input method, the following figure:

Well, with the HTML structure, let's define some CSS.

CSS Code

First define the global font

: root{font-family: "5fae8f6f96c59ed1", helvetica,arial;}

After testing, this sidebar, in Microsoft's elegant font under the best effect, so you want to specify the Web page using Microsoft Ya black. The above code,: root to select the HTML root, all documents in the entry into force, which 5fae8f6f96c59ed1 is the Microsoft Ya Black, as to why this write and not written as "Microsoft Ya Black", if the user computer is in English, it must not find Microsoft Ya black this font, This way, as long as there is Microsoft ya black font, you can use.
Position Tool Bar Location

Div[id= "tooltip"]{
  width:40px;
  height:120px;
  position:fixed;
  bottom:50%;
  right:20px;
  }

The CSS defines the height and width of the sidebar, and position:fixed that it is pinned to the page and does not move according to the scroll bar. bottom:50%, keep it in the middle of the page, right:20px says it's 20 pixels to the right.
Response action

div[id^= "Tool"]{
  font-size:38px;
  Cursor:pointer;
  Color: #000000;
  }
div[id^= "tool"]:hover{
  color: #999999;
  }

Response operations can make the tool more humane, such as the above image effect, when we move the mouse to the arrow, it will turn gray, indicating that you have moved the arrows to the top. Here, I use a new selector div[id^= "tool"] it means to select all div tags that start with tool. Defines a font size of 38px and adjusts the triangle to fit the size. Set the Cursor:pointer property, when you move the mouse to the top, it will appear as a finger shape, so that you mistakenly think is a clickable link. The following statement, when you move the mouse to the top, the color becomes #999999. This is a response operation to improve the user experience.
Middle CSS Code

Div[id= "Toolc"]{
  font-size:22px;
  Float:right;
  width:40px;
  height:70px;
  Overflow:hidden;
   }
Div[id= "Sharetxt"]{
width:26px;
margin-right:8px;
Float:right;
height:70px;
Display:inline;
margin-top:4px;
}
Div[id= "Shareit"]{
width:304px;
height:62px;
Float:right;
height:30px;
margin:15px 0px;
none{
display:none
}
. inline{
display:inline;
}

Relatively simple, there is no bright spot, see for yourself on the line. The focus is on how to implement the slide Show Share button. I used the method is to define two div, floating placement, where the share button that div default is hidden, only the mouse to move up after the trigger, it will be displayed.

jquery Code

Before adding jquery code, we need to thoroughly clean out the way the share button is implemented. jquery doesn't provide a way to slide sideways, so how does that happen? This can be achieved, first the background color into black, so that the Load Sharing button div box appears, but this time because the width is not enough to show the share button Div, so you temporarily do not see. Using the Animate method of jquery, let the width gradually widen until the share button div is fully displayed. This creates an illusion that the black slides out and then the Share button appears.

The specific implementation code is as follows

 $ (function () {$ ("#toolc"). MouseEnter (function () {//Here the MouseEnter method is used to trigger, when the mouse moves up, Triggers this method $ ("#toolc"). CSS ({"Color": "#ffffff", "BackgroundColor": "#000000"}); Add a background to the middle and change the text to white $ ("#shareit"). Removeclass ("None"). AddClass ("inline"); Remove the none of the Shareit and let it show up, but because it is not wide enough to display $ ("#toolc"). Animate ({width: "350px"},200); Using the Animate method, dynamically change the width until the share button is displayed. MouseLeave (function () {///when the mouse is removed from the target area, triggers the following event $ ("#toolc"). CSS ({"Color": "# 000000 "," BackgroundColor ":" #ffffff "}); With inverse $ ("#shareit"). Removeclass ("inline"). AddClass ("none"); With inverse $ ("#toolc"). Animate ({width: "40px"},200);
  With the opposite, you understand});
  $ ("#toolt"). Click (function () {$ ("html,body"). Animate ({scrolltop: "-=900px"},200);///per click, slide up 900px});
$ ("#toolb"). Click (function () {$ (' html,body '). Animate ({scrolltop: "+=900px"},200)

}); 

Note I have written in the code above, and take a close look. Here, I want to say is to slide up the 900px. I didn't have it clicked directly to the top or bottom. Because I think, if the article is longer, the viewer does not necessarily want to slide directly to the bottom, but to see the following content. If he really wants to slide to the bottom, just point two or three times. This is also the details of a user experience.