Implementation of rolling switching effect based on jquery _jquery

Imitation of the sharp jquery case to do a rollover effect, for everyone to refer to, the specific content as follows

The effect of the following figure:

The foreground HTML code is as follows:

<! DOCTYPE html>  

The

Rollcontrol.css code is as follows:

body {margin:0px;
padding:0px;
  } #view_menu {width:600px;
  height:30px;
  line-height:30px;
Cursor:default;
  } #view_menu_title {float:left;
  font-family: ' Microsoft Yahei ';
  width:150px;
Text-align:center;
  } #view_menu_trends {float:left;
  line-height:30px;
  Color: #99CC99;
font-size:10px;

}. Currenttrends {color: #009933;}
  #view_menu_trends ul {list-style:none;
  margin:0px;
padding:0px;
  #view_menu_trends ul li {text-align:center;
  Float:left;
width:15px;
  } #view_menu_control {float:left;
  width:100px;
  height:30px;
Text-align:center;
  #view_menu_control img {width:25px;
  height:25px;
  line-height:30px;
Cursor:pointer;
  } #view_content {width:548px;
  height:178px;
  position:relative;
  Overflow:hidden;
border:1px solid #CCCCCC;
  } #view_content_fixed {Position:absolute;
width:2500px;

#view_content_fixed img {cursor:pointer;}
  #view_content ul {margin:0px; PositiOn:absolute;
padding:0px;
  #view_content ul li {margin:0px;
  padding:0px;
  Float:left;
  padding:8px;
  List-style:none;
Display:inline;

 }

The span label under View_content_fixed is for captions.

The effect chart is as follows:

There are two other places that are not refined, the first one is

This dynamic click can also switch the page, the second

Left and right toggle button, you can add pressure effect, click the time to take dark pictures.

Well, the overall effect on this, the details of their own to play it, I hope that they can persist in writing, from small cases to large cases, study hard!

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.