Home>

Simple Barrage Effect:Randomly display the published content on the right side of the barrage.Gradually shift left and finally disappear.

Involved knowledge points:val (), random (), height (), css (), append (), remove (), etc., mainly the operation of elements

html code:

<a href="#">Barrage Technology</a>
  <div>
    <a href="#"&x;x</a>
  </div>
  <!-Bottom speech box front-end->
  <div>
    <input></input>
    <a href="#">Speech</a>
  </div>

css code:

html, body {
    background-image:url ("images/208.jpg");
    height:100%;//The display area of ​​the text should be set
  }
  div.mask {
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5;
    top:0px;
    left:0px;
  }
  div.bottom {
    width:100%;
    height:77px;
    background-color:#090909;
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    line-height:77px;
  }
  div.bottom input.content {
    width:605px;
    height:37px;
    border:none;
    border-radius:10px 0px 0px 10px;
    font-size:16px;
    font-family:"microsoft yahei";
  }
  div.bottom a.send {
    background-color:green;
    color:#fff;
    display:inline-block;
    width:150px;
    height:40px;
    line-height:37px;
    text-align:center;
    position:relative;
    left:-10px;
    top:-2px;
    border-radius:0px 10px 10px 0px;
    text-decoration:none;
    font-family:"microsoft yahei";
  }
  div.mask a.button {
    width:50px;
    height:50px;
    border-radius:30px;
    background-color:#660000;
    color:#fff;
    position:fixed;
    top:20px;
    right:20px;
    text-align:center;
    line-height:50px;
    font-size:30px;
    font-family:"microsoft yahei";
    border:1px solid #fff;
    text-decoration:none;
    cursor:pointer;
  }
  div.text {
    color:#fff;
    position:fixed;
    right:0px;
    font-size:20px;
    white-space:nowrap;
  }

jquery code:

$("a.send"). click (function () {
      //Get content,Create new elements,And set the position to append to the target element
      var val=$("input.content"). val ();
      var $content=$("<div>" + val + "</div>");
      var top=math.random () * $(document.body) .height ()-77;
      $content.css ("top", top);
      $("div.mask"). append ($content);
      //Move to the far right,Delete the element directly
      $content.animate ((right:$(document.body) .width () + 100}, 8000, function () {
        $(this) .remove ();
      });
    });
    $("div.button"). click (function () {
      $("div.mask"). hide (2000);
    });
  • Previous Summary of PHP string comparison function usage (strcmp, strcasecmp, strnatcmp and strnatcasecmp)
  • Next Detailed usage examples of spl_autoload_register () function in PHP