ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript 虫眼鏡効果 js コンポーネント qsoft.PopBigImage.v0.35 追加 chrome support_image 特殊効果
qsoft.PopBigImage.v0.35.demo.rar
新機能:
1. onload をロードして ID を指定する必要はなく、img にマークを追加するだけで表示レイヤーが動的に生成されます。最初のマウスが入ったとき
2. 右側の表示レイヤーのサイズを自由に調整できます。
qsoft.PopBigImage
バージョン: 0.35
作成者: kimmking@163.com
日付: 2009 年 3 月 26 日 15:20:50
関数の説明:
一般に、ページ上の画像の表示サイズは、レイアウトを考慮して実際のサイズより小さくなっています。
画像上にマウスを移動すると、画像と同じサイズのレイヤーが隣に表示されます。
そして、マウス付近の領域に対応する元の画像の領域が、元のサイズに従ってこのレイヤーに表示されます。
v0.1: IE上で小さい画像をマウスでスライドさせると、対応する部分拡大画像を動的に表示する機能を実装しました。
v0.2: Firefox 互換性サポートを実装し、IE でオフセット 0,0 を渡すときのギャップの位置合わせの問題を修正しました。
v0.3: マウスが初めて画像に入ったときの表示レイヤーの動的作成を実装しました。静的な作成メソッドを提供します。
v0.35: Google Chrome ブラウザのサポートを追加しました。
パラメータの説明:
origImageId: バインドされる img オブジェクトの ID
dx: バインドされた img オブジェクトの右側を基準とした大きな画像の x 軸オフセットを表示します
dy:大きな画像を表示します。バインドされた img オブジェクト上の y 軸オフセットを基準にします
mx: 表示レイヤーの幅
mx が 0 から 1 の間の場合、大きな画像の幅 * mx の値を取得します
mx の大きい方は 1 から 10 の間であり、mx が 10 より大きい場合は、小さい方の画像の幅 *mx と大きな画像の幅を取ります。 、mxが大画像と小画像の幅以内であることを確認し、超えている場合は境界値を取る
my: 表示レイヤーの高さ
mxの値を参照
bflag: どうか。 create メソッドでレンダリング後に表示レイヤーを表示するには、onmouseover イベントで
を使用します。ページのロード時に初期化するには、false パラメーター
を使用します。 使用法:
1.読み込み後にページを均一に読み込み、ページに JavaScript スクリプトを追加します。
window.onload = function(){
new qsoft.PopBigImage("orig",20,0,2,2).render();
//または qsoft.PopBigImage.create("orig",20,0,2,2,false ).render();
}
または
2. 表示レイヤーこの画像の .PopBigImage.create(this,20,0,2,2,true);" を img タグに追加します。 >ダウンロードアドレス
http://www.jb51.net/codes/12597.html
デモアドレス:
http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage .v0.35.html