小编jau*_*unt的帖子

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-6">
    <div class="well bs-component">
      <form class="form-horizontal" name="signUp" id="signUp" novalidate>
        <fieldset>
          <legend>Sign Up</legend>
          <div class="form-group inputEmail">
            <label for="inputUsername" class="col-lg-2 control-label">Username</label>
            <div class="col-lg-10">
              <input type='email' class="form-control" id="inputEmail" placeholder="Your Email" maxlength="56" />
            </div>
          </div>
          <div class="form-group inputPassword">
            <label for="inputPassword" …

$('.item').on('click', function() {
  alert($(this).attr('id'));
});

    .container {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      box-shadow: inset 0 0 10px black;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .item {
      width: 250px;
      height: 80px;
      margin: 3px 0;
      background-color: #cacaca;
      position: relative;
      text-align: center;
      z-index: -1;
      /*Shadow visible, JS doesn't work*/
      /*z-index: 0;*/
      /*Clickable, but shadow is covered */
    }

<div class="container">
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
  <div class="item" id="item2">
    <p>CLICK</p>
  </div>
  <div class="item" id="item3">
    <p>CLICK</p>
  </div>
  <div class="item" …

div {
  background: blue;
  width: 400px;
  height: 200px;
}

<div>
  <button>Click Me</button>
  <button>No, Click Me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>Alright, you can click them</button>
  <button>What about me?</button>
  <button>I don't care</button>
  <button>Click Whoever</button>
  <button>OMG I'm a button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
</div>

var picture = new Image();
picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
	var ctx = document.createElement("canvas").getContext("2d");
		ctx.canvas.width = canvas.width;
		ctx.canvas.height = canvas.height;
	ctx.fillStyle = "red";	
	ctx.rect (0, 0, 40, 40);
	ctx.fill();

	ctx.drawImage(picture,0,0);
	
	image = new Image();
	image.setAttribute('crossOrigin', 'anonymous');
	image.src = ctx.canvas.toDataURL("image/png");		
}
function draw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0,0,100,100,0,0,100,100);	
}
function play(){
  generate();
  setInterval(function(){draw();}, 0.0333);
}

window.onload = function(){
	if(picture.complete)play();
	else picture.onload = play;	
}

<canvas id="background" width=500 height=500></canvas>