Home>
<html>
 <head>
 <title>jquery operation animation</title>
 <meta charset="utf-8" />
 <script src="http://libs.google.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  //Implement click trigger in a function --- the implementation method of jquery and js combination,(Not recommended)
  var flag=false;//It is initially set to not display,Therefore, it is set to false, and the pull-down operation will be performed corresponding to false.
//function testcl () {//Implement one-click drop-down display.
Click again to collapse
//if (flag) {
//$("#showdiv"). slideup (2000);
//$("#lb1"). attr ("src", "../img/labledown.jpg" ");
//flag=false;
//} else {
//$("#showdiv"). slidedown (2000);
//$("#lb1"). attr ("src", "../img/lableup.jpg" ");
//flag=true;
//}
//}
  //Just use jquery, not onclick
//$(function () {//Equivalent to the effect of $(document), placed when the page loads
////$("ul>label"). bind ("click", function () //This operation can also be achieved using bind,And can modify its event triggering mechanism
//$("ul>label"). click (function () {//Use ul>label to get the attribute child object,And then manipulate its properties
//if (flag) {
//$("#showdiv"). slideup (2000);
//$("#lb1"). attr ("src", "../img/labledown.jpg");
//flag=false;
//} else {
//$("#showdiv"). slidedown (2000);
//$("#lb1"). attr ("src", "../img/lableup.jpg");//Change the icon of the label
//flag=true;
//}
//});
//}) //use $directly for page operations,Inside its function is a click property operation for a label
  //Use decentralized methods to implement mouse movement
  $(function () {
  $("ul>label"). bind ("mouseout", function () {
   $("#showdiv"). slideup (2000);
   $("#lb1"). attr ("src", "../img/labledown.jpg");
  });
  $("ul>label"). bind ("mouseover", function () {
   $("#showdiv"). slidedown (2000);
   $("#lb1"). attr ("src", "../img/lableup.jpg");
  });
  }) //There are two object operations in the page operation to control the two events respectively
 </script>
 <style type="text/css">
  ul li {
  list-style-type:none;
  }
  img {
  width:160px;
  height:100px;
  margin-left:70px;
  }
  #lb1 {
  width:30px;
  height:20px;
  margin-top:80px;
  margin-left:80px;
  }
 </style>
 </head>
 <body>
 <ul>
  <img src="../img/labledown.jpg" /><label for=""
  <div>< ;!-Set to not display at the beginning->
  <li><img src="../img/0.jpg" /></li>
  <li><img src="../img/dangao.jpg" /></li>
  </div>
 </ul>
 </body>
</html>
  • Previous Pytorch uses MNIST dataset to implement CGAN and generate specified numbers
  • Next Solution about incomplete output in python pycharm
  • Trends