<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于jQuery功能强大的图片查看器插件|DEMO_爱编程w2bc.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/viewer.css">
<link rel="stylesheet" href="css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3">
<h3 class="page-header">Options</h3>
<div class="docs-toggles">
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group">
<label class="btn btn-primary active">
<input type="radio" name="inline" data-value="false" autocomplete="off" checked> Modal mode
</label>
<label class="btn btn-primary">
<input type="radio" name="inline" data-value="true" autocomplete="off"> Inline mode
</label>
</div>
<button class="btn btn-primary btn-block hidden-md hidden-lg" id="toggle-options" data-target="#options" data-toggle="collapse" aria-expanded="true">Toggle options</button>
<div class="docs-collapse collapse" id="options" aria-labelledby="toggle-options">
<ul class="list-group">
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="button" checked> button
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="navbar" checked> navbar
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="title" checked> title
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="toolbar" checked> toolbar
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="tooltop" checked> tooltop
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="movable" checked> movable
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="zoomable" checked> zoomable
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="rotatable" checked> rotatable
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="scalable" checked> scalable
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="transition" checked> transition
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="fullscreen" checked> fullscreen
</label>
</li>
<li class="list-group-item">
<label class="checkbox-inline">
<input type="checkbox" name="keyboard" checked> keyboard
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-8 col-md-6">
<h3 class="page-header">Demo</h3>
<div class="docs-galley">
<ul class="docs-pictures clearfix">
<li><img data-original="assets/img/emma-watson-1.jpg" src="assets/img/thumbnails/emma-watson-1.jpg"></li>
<li><img data-original="assets/img/emma-watson-2.jpg" src="assets/img/thumbnails/emma-watson-2.jpg"></li>
<li><img data-original="assets/img/emma-watson-3.jpg" src="assets/img/thumbnails/emma-watson-3.jpg"></li>
<li><img data-original="assets/img/emma-watson-4.jpg" src="assets/img/thumbnails/emma-watson-4.jpg"></li>
<li><img data-original="assets/img/emma-watson-5.jpg" src="assets/img/thumbnails/emma-watson-5.jpg"></li>
<li><img data-original="assets/img/emma-watson-6.jpg" src="assets/img/thumbnails/emma-watson-6.jpg"></li>
<li><img data-original="assets/img/emma-watson-7.jpg" src="assets/img/thumbnails/emma-watson-7.jpg"></li>
<li><img data-original="assets/img/emma-watson-8.jpg" src="assets/img/thumbnails/emma-watson-8.jpg"></li>
<li><img data-original="assets/img/emma-watson-9.jpg" src="assets/img/thumbnails/emma-watson-9.jpg"></li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-3">
<h3 class="page-header">Methods</h3>
<div class="docs-buttons" role="group">
<div class="input-group">
<input type="text" class="form-control" id="viewIndex" name="index" value="4" placeholder="index">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" data-enable="inline" data-method="view" data-target="#viewIndex" title="View one of the images with image's index">View</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" id="zoomRatio" name="ratio" value="0.5" placeholder="ratio">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" data-enable="inline" data-method="zoom" data-target="#zoomRatio" title="Zoom the image">Zoom</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" id="zoomToRatio" name="ratio" value="1" placeholder="ratio">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" data-enable="inline" data-method="zoomTo" data-target="#zoomToRatio" title="Zoom the image to a special ratio">Zoom To</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" id="rotateDegrees" name="degrees" value="90" placeholder="degrees">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" data-enable="inline" data-method="rotate" data-target="#rotateDegrees" title="Rotate the image">Rotate</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" id="rotateToDegrees" name="degrees" value="360" placeholder="degrees">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" data-enable="inline" data-method="rotateTo" data-target="#rotateToDegrees" title="Rotate the image to a special angle">Rotate To</button>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" data-arguments="[0.5]" data-enable="inline" data-method="zoom" title="Zoom in">Zoom In</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" data-arguments="[-0.5]" data-enable="inline" data-method="zoom" title="Zoom out">Zoom out</button>
</div>
</div>
<d
jQuery仿QQ空间图片查看特效（全屏，放大，缩小，旋转，镜像，鼠标滚轮缩放）
5星 · 超过95%的资源 需积分: 24 76 浏览量
2016-01-24
00:53:40
上传
评论 1
收藏 3.58MB ZIP 举报 
超级图片弹出层.zip （75个子文件） 
2015-09-08-jquery-powerful-album-view 
.project 413B
index.html 12KB 使用方法.html 2KB src scss _mixins.scss 321B viewer.scss 406B _navbar.scss 445B _toolbar.scss 564B _icons.scss 3KB _tooltip.scss 306B _variables.scss 129B _player.scss 218B _container.scss 687B _button.scss 278B _title.scss 276B _footer.scss 119B _canvas.scss 107B _utilities.scss 498B img 
icons.png 1KB icons.psd 53KB js outro.js 4B variables.js 2KB plugin.js 849B defaults.js 2KB methods.js 14KB template.js 1KB build.js 2KB intro.js 516B prototype.js 41B others.js 3KB viewer.js 509B bind.js 959B handlers.js 8KB utilities.js 2KB init.js 1KB render.js 5KB assets img 
emma-watson-3.jpg 240KB emma-watson-4.jpg 338KB emma-watson-9.jpg 283KB emma-watson-7.jpg 340KB emma-watson-6.jpg 526KB emma-watson-5.jpg 237KB emma-watson-8.jpg 325KB thumbnails emma-watson-3.jpg 57KB emma-watson-4.jpg 46KB emma-watson-9.jpg 56KB emma-watson-7.jpg 60KB emma-watson-6.jpg 59KB emma-watson-5.jpg 58KB emma-watson-8.jpg 61KB emma-watson-1.jpg 56KB emma-watson-2.jpg 60KB emma-watson-1.jpg 288KB emma-watson-2.jpg 335KB js main.js 2KB jquery.min.js 123KB bootstrap.min.js 43KB fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.woff 23KB css bootstrap.min.css 120KB fonts icomoon.woff 1KB icomoon.ttf 1KB icomoon.svg 2KB icomoon.eot 2KB readme.html 891B dist viewer.min.js 23KB viewer.min.css 7KB viewer.js 42KB viewer.css 8KB css default.css 6KB normalize.css 2KB main.css 2KB 爱编程.url 128B
- 1
- 2
前往页