Rumah

Kesan khas JS

kesan khas html5

Gambar H5 kesan pembesaran penuh atau separa

Muat turun sekarang Pratonton

<!DOCTYPE html>
<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的图片整张或局部放大特效，需要的朋友可以直接下载使用，更多住物中更多物网。

Penafian

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.

Lima kod kesan khas dinamik Tahun 2022 Harimau yang hebat [Disyorkan]

25 Jan 2022

Sambut Tahun Baru dengan gembira! Tahun Baru 2022 semakin hampir Tahun ini adalah Tahun Harimau di Renyin. Terdapat aliran produk yang tidak berkesudahan dengan pelbagai imej harimau. Laman web PHP Cina berikut meringkaskan dan mengesyorkan kod kesan khas terkini untuk Tahun Harimau, termasuk kod kesan khas untuk menghantar berkat untuk Tahun Harimau, melukis animasi untuk Tahun Harimau dan kod kesan khas yang lain.

Koleksi 16 kod kesan khas Krismas yang indah dan praktikal!

21 Dec 2021

Krismas akan datang, dan kami pengaturcara juga harus berasa romantis~ Laman web PHP Cina akan berkongsi dengan anda semua jenis kod kesan khas Krismas yang indah dan praktikal, termasuk pelbagai bahan kesan khas pokok Krismas dan kesan khas bahan animasi Santa Claus Seterusnya. dsb., klik pada pautan yang sepadan dalam artikel untuk pratonton dalam talian dan muat turun secara percuma!

Apakah maksud kelas pseudo dan objek pseudo dalam css

27 Apr 2022

Dalam CSS, pseudo-class bermaksud untuk mentakrifkan keadaan khas elemen Anda boleh menambah beberapa kesan khas pemilih Mereka adalah beberapa ciri dan fungsi yang diberikan oleh kelas terbina dalam CSS itu sendiri adalah untuk menambah kesan khas kepada tertentu pemilih. Maksudnya, kesannya boleh dicapai dengan menambah elemen sebenar.

Ajar anda langkah demi langkah cara menggunakan PS untuk menambah kesan ais pada bahan tangan (kongsi)

13 Sep 2021

Dalam artikel sebelumnya "Ajar anda cara menggunakan PS untuk mencipta teks kesan khas nyalaan (perkongsian kemahiran)", saya memperkenalkan anda cara menggunakan PS untuk mencipta teks kesan khas nyalaan. Artikel berikut akan memperkenalkan kepada anda cara menggunakan PS untuk menambah kesan ais pada bahan tangan Mari kita lihat cara melakukannya bersama-sama.

Petua PS: Cara menambah kesan pembahagian pada foto dengan cepat (kongsi)

09 Aug 2021

Dalam artikel sebelum ini "Ajar anda langkah demi langkah cara menggunakan PS untuk mencipta fon kesan khas corak air (koleksi)", saya memperkenalkan kepada anda cara menggunakan PS untuk mencipta fon kesan khas corak air. Artikel berikut akan memperkenalkan kepada anda cara menggunakan PS untuk menambah kesan pembahagian pada foto Mari lihat cara melakukannya bersama-sama.

Ambil masa satu minit untuk menambah bulan pada gambar menggunakan PS (kongsi)

05 Aug 2021

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan PS untuk menambah kesan khas dinamik pada gambar sukan (jumlah 5 langkah)", saya memperkenalkan kepada anda cara menggunakan PS untuk menambah kesan khas dinamik pada gambar. Artikel berikut akan memperkenalkan kepada anda cara menggunakan PS untuk mencipta kesan bulan sebenar Mari kita lihat cara melakukannya bersama-sama.

Aurora yang cantik juga boleh direalisasikan dengan CSS!

28 Dec 2021

Anda masih boleh mencipta kesan khas yang serupa dengan aurora menggunakan CSS Mari cuba bersama hari ini.

Mari kita bincangkan tentang cara menggunakan CSS untuk mencapai kesan kaca beku (penerokaan penyelesaian yang serasi)

01 Apr 2022

Bagaimana untuk mencapai kesan kaca beku menggunakan CSS? Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS untuk mencapai kesan khas kaca beku (penerokaan penyelesaian yang serasi saya harap ia akan membantu anda).

See all articles

Alat panas Tag

penyunting PHP

Alat pembangunan

PHP IDE

Rangka kerja PHP

PHP debugging tools

PHP extensions

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.

Kesan khas animasi pengakuan belon cinta Hari Valentine

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.

Tunjukkan Lagi

Artikel Panas

Hilang Rekod: Bloom & Rage - Gabungan Kunci Corey dan Dylan

19 Feb 2025 Panduan permainan mudah alih

Longvinter: Panduan Memancing Lengkap

21 Feb 2025 Panduan permainan mudah alih

KCD 2: Peta Lokasi dan Penyelesaian Zhelejov Marshes

19 Feb 2025 Panduan permainan mudah alih

Hello Kitty Island Adventure: Reboot The Robots Quest Walkthrough

16 Feb 2025 Panduan permainan mudah alih

Delta Force: Cara Mencari Kekunci

16 Feb 2025 Panduan permainan mudah alih

Tunjukkan Lagi