代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Zooming</title>
<meta name="description" content="Image zoom that makes sense.">
<meta name="keywords" content="Image,Zoom,Image Zoom,JavaScript">
<meta name="author" content="Pengcheng Ding">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<style>
.container {
max-width: 600px;
}
section.header {
margin-top: 4rem;
text-align: center;
}
section.content {
text-align: center;
}
footer {
text-align: center;
}
.value-img {
display: block;
text-align: center;
margin: 2em 0;
}
img {
max-width: 100%;
}
@media (min-width: 550px) {
.header {
margin-top: 10rem;
}
}
.button.button-primary {
background-color: #f9c04d !important;
border-color: #f9c04d !important;
}
.button.button-secondary {
background-color: #eee !important;
border-color: #eee !important;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<section class="header">
<h2>Zooming</h2>
<div class="value-img">
<img id="img-default" src="assets/img/journey_start_thumbnail.jpg" data-action="zoom" data-original="assets/img/journey_start.jpg"
alt="journey_start_thumbnail" />
</div>
</section>
<section class="content">
<h4>Image zoom that makes sense.</h4>
<ul>
<li>Pure JavaScript & built with mobile in mind.</li>
<li>Smooth animations with intuitive gestures.</li>
<li>Zoom into a hi-res image if supplied.</li>
<li>Easy to integrate & customizable.</li>
</ul>
<div class="value-img">
<a href="assets/img/journey.jpg">
<img id="img-custom" src="assets/img/journey_thumbnail.jpg" alt="journey_thumbnail" />
</a>
</div>
<p>
<small>Options below were designed to affect the second image only.</small>
</p>
<div class="row">
<a class="button" id="btn-fast">faster</a>
<a class="button" id="btn-dark">dark</a>
<a class="button" id="btn-scale-small">smaller</a>
</div>
<br>
<p>
<em>Faced with rolling sand dunes, age-old ruins, caves and howling winds, your passage will not be an easy one. The
goal is to get to the mountaintop, but the experience is discovering who you are, what this place is, and what
is your purpose.</em>
</p>
<br>
<a class="button" href="https://github.com/kingdido999/zooming">GitHub</a>
<a class="button button-primary" href="http://kingdido999.github.io/zooming/docs">Get Started</a>
</section>
<br>
</div>
<hr>
<footer>
<p id="copyright"></p>
<p id="license">
<a href="https://opensource.org/licenses/MIT">The MIT License</a>
</p>
</footer>
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="build/zooming.js"></script>
<script>
const defaultZooming = new Zooming()
const customZooming = new Zooming()
const config = customZooming.config()
const TRANSITION_DURATION_DEFAULT = config.transitionDuration
const BG_COLOR_DEFAULT = config.bgColor
const SCALE_BASE_DEFAULT = config.scaleBase
const ACTIVE_CLASS = 'button-primary'
const btnFast = document.getElementById('btn-fast')
const btnDark = document.getElementById('btn-dark')
const btnScaleSmall = document.getElementById('btn-scale-small')
document.addEventListener('DOMContentLoaded', function () {
defaultZooming.listen('#img-default')
customZooming.listen('#img-custom')
})
btnFast.addEventListener('click', function (event) {
const transitionDuration = toggleActive(btnFast)
? 0.2
: TRANSITION_DURATION_DEFAULT
customZooming.config({ transitionDuration })
})
btnDark.addEventListener('click', function (event) {
const bgColor = toggleActive(btnDark)
? 'black'
: BG_COLOR_DEFAULT
customZooming.config({ bgColor })
})
btnScaleSmall.addEventListener('click', function (event) {
const scaleBase = toggleActive(btnScaleSmall)
? 0.7
: SCALE_BASE_DEFAULT
customZooming.config({ scaleBase })
})
function isActive(el) {
return el.classList.contains(ACTIVE_CLASS)
}
function activate(el) {
el.classList.add(ACTIVE_CLASS)
}
function deactivate(el) {
el.classList.remove(ACTIVE_CLASS)
}
function toggleActive(el) {
if (isActive(el)) {
deactivate(el)
return false
} else {
activate(el)
return true
}
}
const copyright = 'Copyright © ' +
new Date().getFullYear() +
' <a href="https://github.com/kingdido999">Pengcheng Ding</a>' +
' and other <a href="https://github.com/kingdido999/zooming/graphs/contributors">contributors</a>'
document.getElementById('copyright').innerHTML = copyright
</script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。