JS/jQuery图片预览，支持旋转-放大-放小-全屏，例子demo

时间：2025-03-29 13:37:47

JS/jQuery图片查看器演示-默认效果_dowebok

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器演示-默认效果_dowebok</title>
<link rel="stylesheet" href="css/">
<style>
* { margin: 0; padding: 0;}
#dowebok { width: 700px; margin: 0 auto; font-size: 0;}
#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#dowebok li img { width: 100%;}
</style>
</head>

<body>
<h1>默认效果</h1>

<ul >
	<li><img data-original="img/" src="img/thumbnails/" alt="图片1"></li>
	<li><img data-original="img/" src="img/thumbnails/" alt="图片2"></li>
	<li><img data-original="img/" src="img/thumbnails/" alt="图片3"></li>
	<li><img data-original="img/" src="img/thumbnails/" alt="图片4"></li>
	<li><img data-original="img/" src="img/thumbnails/" alt="图片5"></li>
	<li><img data-original="img/" src="img/thumbnails/" alt="图片6"></li>
</ul>

<script src="js/"></script>
<script>
var viewer = new Viewer(('dowebok'), {
	url: 'data-original'
});
</script>

完整demo

/download/baidu_29701003/10635548

相关文章