jqueryはページ画像を同じ割合で拡大・縮小する機能を実装します_jquery

WBOY
リリース: 2016-05-16 17:00:31
オリジナル
1390 人が閲覧しました

HTML コード構造:

コードをコピー コードは次のとおりです。

スタイル:

コードをコピー コードは次のとおりです:

a{width:300px;height:300px ;background: #fff;border:1px Solid #666;display:inline-block} /* ここでは、a タグの高さと幅を指定する必要があります。背景と境界線はオプションです*/
Script (jquery は自分で追加してください):

コードをコピー コードは次のとおりです。

$(function () {
var imgs = $('a>img');
imgs.each(function () {
var img = $(this);
var width = img.attr('width');/ /エリア幅
var height = img.attr('height');//領域高さ
var showWidth = width;//最終表示幅
var showHeight = height;//最終表示高さ
var 比 = 幅 / 高さ;//アスペクト比
img.load(function () {
var imgWidth, imgHeight, imgratio;
$('').attr( 'src ', img.attr('src')).load(function () {
imgWidth = this.width;//画像の実際の幅
imgHeight = this.height;//実際の幅画像の高さ
imgRatio = imgWidth / imgHeight;//実際のアスペクト比
if (ratio > imgRatio) {
showWidth = height * imgRatio;//調整された幅が小さすぎます
img. attr('width', showWidth) .css('margin-left', (width - showWidth);
/ .attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
>

このようにして、画像が同じ割合で拡大・縮小されます。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート