Gambar H5 kesan pembesaran penuh atau separa
Gambar H5 kesan pembesaran penuh atau separa
<html lang="zh">
<kepala>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<title>jQuery图片整张或局部放大代码 </title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="src/css/mag.css" />
<link rel="stylesheet" href="src/theme/default.css" />
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
butang .controls-btns{
warna: #333;
}
.mt50{margin-top: 50px;}
</style>
</head>
<badan>
<div class="container mt50">
<utama>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="inner" class="mag-eg-el">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner" class="mag-eg-el">
<img src="img/alley/1000x600.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Dalam</h3>
<pra><code class="lang-html"><!--
--><div mag-thumb="dalaman">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="dalaman">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="dalaman"]');
$host.mag();<!--
--></code></pra>
<p>使用鼠标滚轮可以对内部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap">
<div class="img-thumbnail">
<div mag-thumb="inner-inline" mag-flow="inline" class="mag-eg-el">
<img src="img/alley/500x300.jpg" style="lebar: 400px; lebar maks: 100%; tinggi: auto" />
</div>
<div mag-zoom="inner-inline" class="mag-eg-el">
<img src="img/alley/1000x600.jpg" />
</div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Sebaris Dalam</h3>
<pra><code class="lang-html"><!--
--><div mag-thumb="dalam-dalam" mag-flow="inline">
<img src="img/alley/500x300.jpg" style="lebar: 400px; lebar maksimum:100%;" />
</div>
<div mag-zoom="dalaman-dalam">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="dalam-dalam"]');
$host.mag();<!--
--></code></pra>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="luar" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div class="mag-eg-el-wrap img-thumbnail" style="height:auto;width:auto">
<div style="height: 300px; width: 300px">
<div mag-zoom="outer" class="mag-eg-el" style="float: right;position:relative;overflow:hidden;">
<img src="img/rieti/full.jpg" />
</div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Luar</h3>
<pra><code class="lang-html"><!--
--><div mag-thumb="luar">
<img src="img/alley/500x300.jpg" />
</div>
<div style="lebar: 300px; ketinggian: 300px;">
<div mag-zoom="luar">
<img src="img/alley/1000x600.jpg" />
</div>
</div><!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="luar"]');
$host.mag({
mod: 'luar',
nisbah: 1 / 1.6
});
</code></pre>
<p>使用鼠标滚轮可以对外部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="outer-drag" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-zoom="outer-drag" class="mag-eg-el" style="float: right;">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Seret Luar</h3>
<pra><code class="lang-html"><!--
--><div mag-thumb="seret luar">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="seret luar">
<img src="img/alley/1000x600.jpg" />
</div>
<!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="seret-luar"]');
$host.mag({
mod: 'luar',
kedudukan: 'seret',
togol: palsu
});<!--
--></code></pra>
<p>使用鼠标滚轮可以对外部图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="drag" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div mag-zoom="drag" class="mag-eg-el">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3>Seret</h3>
<pra><code class="lang-html"><!--
--><div mag-thumb="seret">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="seret">
<img src="img/alley/1000x600.jpg" />
</div><!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="drag"]');
$host.mag({
kedudukan: 'seret',
togol: palsu
});<!--
--></code></pra>
<p>使用鼠标滚轮可以对图片进行缩放。</p>
</div>
</div>
</div>
<div class="row mag-eg-row" id="controls">
<div class="col col-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="proportion">
<div mag-thumb="controls" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div mag-zoom="controls" class="mag-eg-el">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div mag-ctrl="controls" class="controls-btns">
<button class="mag-eg-ctrl-zoom-out" mag-ctrl-zoom-by="-0.5">-</button>
<button class="mag-eg-ctrl-zoom-in" mag-ctrl-zoom-by="0.5">+</button>
<button class="mag-eg-ctrl-move-up" mag-ctrl-move-by-y="-0.5">^</button>
<button class="mag-eg-ctrl-move-down" mag-ctrl-move-by-y="0.5">v</button>
<button class="mag-eg-ctrl-move-left" mag-ctrl-move-by-x="-0.5"><</button>
<button class="mag-eg-ctrl-move-right" mag-ctrl-move-by-x="0.5">></button>
<button class="mag-eg-ctrl-fullscreen" mag-ctrl-fullscreen>[ ]</button>
<button class="mag-eg-ctrl-destroy" mag-ctrl-destroy>musnah</button>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3><a href="#controls">Controls</a></h3>
<pra><code class="lang-html"><!--
--><script src="src/js/mag-control.js"></script>
<div mag-thumb="kawalan">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="kawalan">
<img src="img/alley/1000x600.jpg" />
</div>
<div mag-ctrl="kawalan">
<butang mag-ctrl-zoom-by="-0.5">-</button>
<butang mag-ctrl-zoom-by="0.5">+</button>
<butang mag-ctrl-move-by-y="-0.5">^</button>
<butang mag-ctrl-move-by-y="0.5">v</button>
<butang mag-ctrl-move-by-x="-0.5"><</button>
<butang mag-ctrl-move-by-x="0.5">></button>
<butang mag-ctrl-skrin penuh>[ ]</button>
<butang mag-ctrl-destroy>musnah</button>
</div><!--
--></code></pra>
<pra><kod kelas="lang-js"><!--
-->$host = $('[mag-thumb="kawalan"]');
$host.mag(
togol: palsu,
kedudukan: palsu
);
$controls = $('[mag-ctrl="controls"]');
$controls.magCtrl({
mag: $host
});<!--
--></code></pra>
</div>
</div>
</div>
</utama>
</div>
<skrip src="js/jquery.min.js"></script>
<skrip src="js/jquery.bridget.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<skrip src="js/jquery.event.drag.js"></script>
<script src="js/screenfull.js"></script>
<skrip src="js/hammer.min.js"></script>
<script src="js/PreventGhostClick.js"></script>
<script src="src/js/mag-analytics.js"></script>
<skrip src="src/js/mag.js"></script>
<skrip src="src/js/mag-jquery.js"></script>
<script src="src/js/mag-control.js"></script>
<skrip src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
这是一个H5的图片整张或局部放大特效，需要的朋友可以直接下载使用，更多住物中更多物网。
Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn
Artikel Berkaitan
Ajar anda cara menggunakan PS untuk menambah kesan pembesaran separa pada gambar (Koleksi)
21 Jul 2021
Dalam artikel sebelum ini "Lima Langkah Mengajar Anda Cara Menggunakan Alat Penghiris dalam PS", saya telah memperkenalkan kepada anda kaedah menggunakan alat penghiris PS. Artikel berikut akan memperkenalkan anda kepada kemahiran PS kecil untuk melihat cara menggunakan PS untuk menambah kesan pembesaran separa terpilih pada gambar.
zum pemalam jQuery merealisasikan pembesaran skrin penuh gambar dan lapisan pop timbul kesan khas_jquery
16 May 2016
zum jQuery ialah pemalam lapisan pop timbul jQuery yang boleh melihat gambar besar album foto Klik pada lakaran kecil album foto, dan gambar besar yang sepadan dengan foto akan muncul, dengan animasi pemuatan yang diperibadikan. serta butang sebelum dan seterusnya. Penggunaannya sangat mudah. Serasi dengan IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, World Window dan pelayar lain.
16 May 2016
Artikel ini terutamanya memperkenalkan kesan khas bar kemajuan HTML5 Rakan yang memerlukannya boleh merujuknya.
16 May 2016
Artikel ini berkongsi dengan anda kesan khas animasi hayunan pakaian HTML5 3D, karya animasi 3D berdasarkan HTML5 Canvas Rakan-rakan yang berminat boleh merujuknya.
16 May 2016
Artikel ini terutamanya memperkenalkan pelaksanaan kesan salji terbang berdasarkan kanvas HTML5, dan menerangkan proses pelaksanaan lengkap dan kod teras kesan khas ini. Rakan yang memerlukannya boleh merujuknya.
Cara menggunakan Vue untuk melaksanakan kesan khas permainan perang pesawat
20 Sep 2023
Cara menggunakan Vue untuk melaksanakan kesan khas permainan Airplane War Pengenalan: Airplane War ialah permainan klasik Dalam permainan, kita perlu melaksanakan kesan khas seperti pergerakan pesawat, penjanaan pesawat musuh, dan penembakan. daripada peluru. Artikel ini akan menggunakan rangka kerja Vue untuk memberikan contoh kod khusus untuk melaksanakan kesan khas permainan pertempuran kapal terbang. Tindanan Teknologi Apabila melaksanakan kesan khas permainan perang kapal terbang, kami akan menggunakan tindanan teknologi berikut: Vue.js: Rangka kerja JavaScript untuk membina antara muka pengguna HTML5Canvas: HTML5 untuk melukis skrin permainan
16 May 2016
Kanvas HTML5 melaksanakan kesan khas serpihan kaca gambar Gambar muncul dalam antara muka dalam bentuk serpihan kaca, dan kemudian kesan kaca pecah secara beransur-ansur Kesannya sangat baik.
16 May 2016
Anda pasti pernah melihat kesan khas titisan hujan, dan kesan istimewa yang akan saya perkenalkan dalam artikel ini direalisasikan dengan bantuan HTML5. Rakan-rakan yang berminat boleh cuba menjalankannya.
16 May 2016
Artikel ini terutamanya memperkenalkan kaedah pelaksanaan merealisasikan kesan khas membalik buku berdasarkan javascript html5 Ia mempunyai nilai rujukan tertentu.
Hot Tools
HTML5 Kesan khas animasi berdebar jantung Kanvas
HTML5 Canvas heart fluttering animation kesan khas ialah animasi yang dijana yang boleh dibuka terus dengan penyemak imbas untuk melihat hati.
Kod sumber permainan panda melantun H5
HTML5 Mobile Panda juga merupakan kod sumber permainan yang gila. Perihalan permainan: Tekan dan tahan skrin untuk melaraskan kekuatan spring panda dan lompat ke tiang batu. Permainan berakhir jika anda jatuh ke dalam sungai.
HTML5 Kesan khas animasi kotak Hari Valentine
Berdasarkan svg, lukis animasi membuka hadiah kotak cinta pada Hari Valentine dan kesan khas animasi kotak cinta.
Kod sumber permainan bola bergolek H5 3D
Muat turun kod permainan mudah alih bergolek bola 3D HTML5 yang hebat. Pengenalan permainan: Bola berwarna bergolek, dan trek semasa bola berwarna dikawal dengan menyeretnya menggunakan tetikus atau skrin sentuh telefon bimbit. Ini ialah kod sumber permainan mudah alih yang ringkas dan mudah dikendalikan.