ホームページ

JS特殊効果

html5特殊効果

H5画像の全体または部分拡大効果

ダウンロード中プレビュー

<!DOCTYPE html>
<html lang="zh">
<頭>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA 互換" 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 ボタン{
色: #333;
}
.mt50{マージントップ: 50px;}
</style>

</head>
<本文>

<div class="コンテナ mt50">
<メイン>
<div class="row mag-eg-row">
<div class="colcol-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="プロポーション">
<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="colcol-md-6">
<div class="mag-eg-doc">
<h3>内側</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>マウスマークを使用すると、内部の画像を拡大できます。 </div>
</div>
</div>

<div class="row mag-eg-row">
<div class="colcol-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="幅: 400px; 最大幅: 100%; 高さ: 自動" />
</div>
<div mag-zoom="inner-inline" class="mag-eg-el">
<img src="img/alley/1000x600.jpg" />
</div>
</div>
</div>
</div>
<div class="colcol-md-6">
<div class="mag-eg-doc">
<h3>内側インライン</h3>
<pre><code class="lang-html">

<img src="img/alley/500x300.jpg"スタイル="幅: 400ピクセル;最大幅: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="colcol-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="プロポーション">
<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="高さ: 300px; 幅: 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="colcol-md-6">
<div class="mag-eg-doc">
<h3>外側</h3>
<pre><code class="lang-html"><div mag-thumb="アウター">
<img src="img/alley/500x300.jpg" />
</div>
<div style="幅: 300px;高さ: 300px;">
<div mag-zoom="外側">
<img src="img/alley/1000x600.jpg" />
</div>
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="outer"]');
$host.mag({
モード: '外側',
比率: 1 / 1.6
});
</code></pre>
<p>マウスマークを使用すると、外部画像を圧縮できます。 </div>
</div>
</div>

<div class="row mag-eg-row">
<div class="colcol-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="プロポーション">
<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="プロポーション">
<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="colcol-md-6">
<div class="mag-eg-doc">
<h3>外側のドラッグ</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({
モード: '外側',
位置: 'ドラッグ',
トグル: false
});</code></pre>
<p>マウスマークを使用すると、外部画像を圧縮できます。 </div>
</div>
</div>

<div class="row mag-eg-row">
<div class="colcol-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="プロポーション">
<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="colcol-md-6">
<div class="mag-eg-doc">
<h3>ドラッグ</h3>
<pre><code class="lang-html"><div mag-thumb="ドラッグ">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="ドラッグ">
<img src="img/alley/1000x600.jpg" />
</div></code></pre>
<pre><code class="lang-js">$host = $('[mag-thumb="ドラッグ"]');
$host.mag({
位置: 'ドラッグ',
トグル: false
});</code></pre>
<p>マウスマークを使用すると、写真を縮小できます。 </div>
</div>
</div>

<div class="row mag-eg-row" id="コントロール">
<div class="colcol-md-6">
<div class="mag-eg-el-wrap img-thumbnail">
<div class="プロポーション">
<div mag-thumb="コントロール" class="mag-eg-el">
<img src="img/rieti/500x334.jpg" />
</div>
<div mag-zoom="コントロール" class="mag-eg-el">
<img src="img/rieti/full.jpg" />
</div>
<div class="filler"></div>
</div>
</div>
<div mag-ctrl="コントロール" 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 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="colcol-md-6">
<div class="mag-eg-doc">
<h3><a href="#controls">コントロール</a></h3>
<pre><code class="lang-html"><スクリプト src="src/js/mag-control.js"></script>

<div mag-thumb="コントロール">
<img src="img/alley/500x300.jpg" />
</div>
<div mag-zoom="コントロール">
<img src="img/alley/1000x600.jpg" />
</div>

<div mag-ctrl="コントロール">
<button mag-ctrl-zoom-by="-0.5">-</button>

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn