实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-回调函数_sucaihuo</title>
<link rel="stylesheet" href="/api/jq/5733e37375c75/css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}
#sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#sucaihuo li img { width: 100%;}
</style>
</head>

build: function() {
		alert('build');
	},

built: function() {
		alert('built');
	},

show: function() {
		alert('show');
	},

shown: function() {
		alert('shown');
	},

hide: function() {
		alert('hide');
	},

hidden: function() {
		alert('hidden');
	},

view: function() {
		alert('view');
	},

viewed: function() {
		alert('viewed');
	}
});
</script>
</body>
</html>

​x
 
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-回调函数_sucaihuo</title>
<link rel="stylesheet" href="/api/jq/5733e37375c75/css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}
#sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#sucaihuo li img { width: 100%;}
</style>
</head>
​
<body>
<h1>回调函数</h1>
​
<ul id="sucaihuo">
    <li><img data-original="/api/jq/5733e37375c75/img/tibet-1.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    <li><img data-original="/api/jq/5733e37375c75/img/tibet-2.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    <li><img data-original="/api/jq/5733e37375c75/img/tibet-3.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    <li><img data-original="/api/jq/5733e37375c75/img/tibet-4.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-4.jpg" alt="图片4"></li>