摘要：<!DOCTYPE html> <html lang="en"> <head> <title>照片墻(css動態(tài)效果)</title> <link rel="stylesheet" href="static/css/animate.min.cs
<!DOCTYPE html>
<html lang="en">
<head>
<title>照片墻(css動態(tài)效果)</title>
<link rel="stylesheet" href="static/css/animate.min.css">
<script src="static/js/jquery.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 1500px;
margin: 50px auto;
}
img{
width: 300px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="static/images/1.jpg" alt="">
<img src="static/images/2.jpg" alt="">
<img src="static/images/3.jpg" alt="">
<img src="static/images/4.jpg" alt="">
<img src="static/images/5.jpg" alt="">
<img src="static/images/6.jpg" alt="">
<img src="static/images/7.jpg" alt="">
<img src="static/images/8.jpg" alt="">
<img src="static/images/9.jpg" alt="">
<img src="static/images/10.jpg" alt="">
<img src="static/images/11.jpg" alt="">
<img src="static/images/12.jpg" alt="">
<img src="static/images/13.jpg" alt="">
<img src="static/images/14.jpg" alt="">
<img src="static/images/15.jpg" alt="">
<img src="static/images/16.jpg" alt="">
</div>
<script>
var arr = ['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceIn','bounceInDown','bounceInLeft']
$('img').on('click',function(){
$('img').removeClass();
// 隨機生成新的class
var rand = parseInt((Math.random()*10);
$(this).addClass('animated '+arr[rand])
})
</script>
</body>
</html>on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
語法:
$(selector).on(event,childSelector,data,function)
event : 必需。規(guī)定要從被選元素移除的一個或多個事件或命名空間。
childSelector : 可選。
data : 可選。
function : 可選。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)。
on() 和 click() 的區(qū)別:
二者在綁定靜態(tài)控件時沒有區(qū)別，但是如果面對動態(tài)產(chǎn)生的控件，只有 on() 能成功的綁定到動態(tài)控件中。
批改老師：天蓬老師批改時間：2019-03-19 15:45:52
老師總結(jié)：事件是javascript編程的核心, 如操作系統(tǒng)一樣, js也是基于事件驅(qū)動的