ホームページ > 記事 > ウェブフロントエンド > JavaScript 画像ズーム関数の実装 code_image 特殊効果
JavaScript 画像ズーム関数の実装 code_image 特殊効果
- WBOYオリジナル
- 2016-05-16 18:04:421109ブラウズ
JS ソース コードを確認します:
コードをコピー コードは次のとおりです:
//ズームインおよびズームアウト制御
var PhotoSize = {
zoom: 0, // ズーム率
count: 0, // ズーム数
cpu: 0, // 現在のズーム倍数の値
elem: "", // 画像ノード
photoWidth: 0, // 画像の初期幅レコード
photoHeight: 0, // 画像の初期高さレコード
init: function(){
this.elem = document.getElementById( "focusphoto");
this.photoWidth = this.elem.scrollWidth;
this. Zoom = 1.2; // 基本パラメータを設定します
this.count = 0;
action: function(x){
if( x === 0){
this .cpu = 1;
}else{
this.count = x; = Math.pow(this.zoom, this.count); // 任意のべき乗演算
};
this.elem.style.width = this.photoWidth * this.cpu "px"; .elem.style.height = this.photoHeight * this.cpu "px";
}
} // 最初のクリックが取得されないように、ズーム効果を開始して onload モードでロードします。画像の幅と高さ
window.onload = function(){PhotoSize.init()};
サイズを正確に読み取れる onload メソッドを使用して参照することをお勧めします初期画像の
写真のズームインとズームアウト
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。