Heim

JS-Spezialeffekte

HTML5-Spezialeffekte

H5的图片整张或局部放大特效

Jetzt downloaden Vorschau

<!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="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">
.controls-btns button{
color: #333;
}
.mt50{margin-top: 50px;}
</style>

</head>
<body>

<div class="container mt50">
<main>
<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>Inner</h3>
<pre><code class="lang-html"><div mag-thumb="inner">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="inner">
<img src="img/alley/1000x600.jpg" />
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="inner"]');
$host.mag();</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">
<div class="img-thumbnail">
<div mag-thumb="inner-inline" mag-flow="inline" class="mag-eg-el">
<img src="img/alley/500x300.jpg" style="width: 400px; max-width: 100%; height: 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>Inner Inline</h3>
<pre><code class="lang-html"><div mag-thumb="inner-inline" mag-flow="inline">
<img src="img/alley/500x300.jpg" style="width: 400px; max-width:100%;" />
</div>
<div mag-zoom="inner-inline">
<img src="img/alley/1000x600.jpg" />
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="inner-inline"]');
$host.mag();</code></pre>

</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" 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>Outer</h3>
<pre><code class="lang-html"><div mag-thumb="outer">
<img src="img/alley/500x300.jpg" />
</div>
<div style="width: 300px; height: 300px;">
<div mag-zoom="outer">
<img src="img/alley/1000x600.jpg" />
</div>
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="outer"]');
$host.mag({
mode: 'outer',
ratio: 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>Outer Drag</h3>
<pre><code class="lang-html"><div mag-thumb="outer-drag">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="outer-drag">
<img src="img/alley/1000x600.jpg" />
</div>
</code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="outer-drag"]');
$host.mag({
mode: 'outer',
position: 'drag',
toggle: false
});</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="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>Drag</h3>
<pre><code class="lang-html"><div mag-thumb="drag">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="drag">
<img src="img/alley/1000x600.jpg" />
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="drag"]');
$host.mag({
position: 'drag',
toggle: false
});</code></pre>
<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>destroy</button>
</div>
</div>
<div class="col col-md-6">
<div class="mag-eg-doc">
<h3><a href="#controls">Controls</a></h3>
<pre><code class="lang-html"><script src="src/js/mag-control.js"></script>

<div mag-thumb="controls">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="controls">
<img src="img/alley/1000x600.jpg" />
</div>

<div mag-ctrl="controls">
<button mag-ctrl-zoom-by="-0.5">-</button>
<button mag-ctrl-zoom-by="0.5">+</button>
<button mag-ctrl-move-by-y="-0.5">^</button>
<button mag-ctrl-move-by-y="0.5">v</button>
<button mag-ctrl-move-by-x="-0.5"><</button>
<button mag-ctrl-move-by-x="0.5">></button>
<button mag-ctrl-fullscreen>[ ]</button>
<button mag-ctrl-destroy>destroy</button>
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="controls"]');
$host.mag(
toggle: false,
position: false
);

$controls = $('[mag-ctrl="controls"]');
$controls.magCtrl({
mag: $host
});</code></pre>
</div>
</div>
</div>

</main>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.bridget.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.event.drag.js"></script>
<script src="js/screenfull.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/PreventGhostClick.js"></script>
<script src="src/js/mag-analytics.js"></script>
<script src="src/js/mag.js"></script>
<script src="src/js/mag-jquery.js"></script>
<script src="src/js/mag-control.js"></script>
<script src="js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

这是一个H5的图片整张或局部放大特效，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

Detaillierte Einführung von 20 wunderschönen HTML5/CSS3-Anwendungs-Plug-Ins (Bilder)

09 Mar 2017

Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos, starke visuelle Wirkung Es gibt viele HTML5-Video-Spezialeffekte, aber diese Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie auf eine beliebige Stelle im Video, und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese zerbrochenen Videofragmente automatisch wieder zusammengesetzt. Es ist ein sehr gutes HTML5-Video.

Detaillierte Einführung in CSS3

15 Jun 2017

Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos Es gibt viele HTML5-Videoplayer, aber diese Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie irgendwo im Video und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese kaputten Videofragmente automatisch wieder zusammengesetzt ...

Empfohlene 3 Artikel über Videofragmentierung und -reorganisation

15 Jun 2017

Auf HTML5 basierende Anwendungen sind mittlerweile weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos Es gibt viele HTML5-Videoplayer, aber diese Spezialeffekte für die Aufteilung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie irgendwo im Video und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese kaputten Videofragmente automatisch wieder zusammengesetzt ...

JavaScript HTML5 Canvas implementiert Bildfragmentierung und Reorganisationsanimation, Spezialeffekte_Javascript-Fähigkeiten

16 May 2016

In diesem Artikel werden hauptsächlich die Video-Spezialeffekte der Fragmentierung und Reorganisation mithilfe der JavaScript-HTML5-Leinwand vorgestellt.

HTML5-Fortschrittsbalken Spezialeffekte_HTML5-Tutorial-Fähigkeiten

16 May 2016

In diesem Artikel werden hauptsächlich die Spezialeffekte des HTML5-Fortschrittsbalkens vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

Teilen Sie einen HTML5-E-Magazin-Flipbook-Spezialeffektcode

28 Apr 2017

HTML5-E-Magazin-Flip-Book-Animations-Spezialeffekte, erstellen Sie ein Fotoalbum von Ihnen oder jemandem mit Ihren Fotos.

Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]

23 Dec 2020

Dang Dang Dang~ Die neuesten coolen und wunderschönen Spezialeffekte für Weihnachtsanimationen sind da! Einschließlich in HTML5, CSS3, JQuery und anderen Sprachen implementierter Spezialeffekte, die einfach und schön sind. Sie können auf den Link im Text klicken, um eine Vorschau der Animationen anzuzeigen

Laden Sie 5 HTML5-Spezialeffekte herunter, die häufig in der Webentwicklung verwendet werden

20 Jun 2017

HTML5 ist mittlerweile zu einem beliebten Trend in der WEB-Entwicklung geworden. HTML5 verfügt über viele lang erwartete neue Funktionen. Heutzutage beginnen viele Webentwickler, HTML5 anstelle von Flash zu verwenden, um verschiedene Rich-Webanwendungen zu erstellen. Die chinesische PHP-Website empfiehlt 5 HTML5-Spezialeffekte, die häufig in der Webentwicklung verwendet werden.

So implementieren Sie mit Vue Spezialeffekte für Flugzeugkriegsspiele

20 Sep 2023

So verwenden Sie Vue, um die Spezialeffekte des Airplane War-Spiels zu implementieren. Im Spiel müssen wir Spezialeffekte wie die Bewegung von Flugzeugen, die Erzeugung feindlicher Flugzeuge und das Abfeuern implementieren von Kugeln. In diesem Artikel wird das Vue-Framework verwendet, um spezifische Codebeispiele für die Implementierung der Spezialeffekte des Flugzeugkampfspiels zu geben. Technologie-Stack Bei der Implementierung der Spezialeffekte des Flugzeugkampfspiels verwenden wir den folgenden Technologie-Stack: Vue.js: JavaScript-Framework zum Erstellen von Benutzeroberflächen; HTML5 zum Zeichnen von Spielbildschirmen

See all articles