イムを作るのですか、と私はこのGoogle Chrome拡張機能の機能を愛し、私はあなたが上にカーソルを移動するときの拡張子の背後にある基本的な考え方があると思いhttps://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipiは、どのように私は、ウェブサイトを作る「Facebookのズーム」
@ Facebookの写真のズームを呼び出しますサムネイル、元のイメージファイルを取得し、フルビューで表示します。イメージが大きすぎる場合は、ウィンドウの上部または下部のバーまたはコーナーの位置になります。大きすぎない場合は、マウスの横に浮かびます。
私はその背後にある論理を理解していますが、実際にコーディングするのはちょっと難しいようです。私が理解していない部分は、拡張された画像の位置をどのようにコード化し、マウスを左右に動かすと縮小/拡大させるのかということだけです。おかげで
13 zoom jquery plugins in here。あなたのニーズに最適なものを選択してください：
これは、画像にズームしていない、サムネイルの上にマウスを置くと、私はオリジナルの大きな画像ではなく、サムネイルの拡大バージョンではありません – Ben
このChrome拡張機能に似ていますが、サムネイルとフルサイズの画像にURLを入力する必要があります。ツールチップはpreview imageです。オリジナルはblog postです。
スクリプトを修正して、画像のサイズをカーソルと右端の間の距離に合わせて調整しました。完璧ではありませんが、機能します。ここにはdemoがあります。 mouseover上
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$('a.preview').hover(function(e){
this.t = this.title;
this.title = '';
var p, c = (this.t != '') ? '<br/>' + this.t : '';
$('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>');
// load image and get size
p = $('#preview');
p
.fadeIn('fast')
.find('img').load(function(){
// get image dimensions after it has been loaded
p.data('widths', [ $(window).width(), p.find('img').width() ]);
// set image to 100% to fit in preview window
$(this).width('100%');
position(e);
});
},
function(){
this.title = this.t;
$('#preview').remove();
});
$('a.preview').mousemove(function(e){
position(e);
});
var position = function(e){
var w, prevw = $('#preview'),
w = $.data(prevw[0], 'widths');
if (w) {
prevw
.css('top', e.pageY + yOffset)
.css('left', e.pageX + xOffset)
.css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ? w[0] - e.pageX - xOffset : w[1] || 'auto');
}
};
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
uはそれを理解しましたhttp://www.ideabonus.com/Kabbar/index.html
でKabbar画像ズーマーを参照してください？はいの場合はコードを共有してください – Abhimanyu
ここにサンプル問題があります。それはJavascript/JqueryではなくCSSトリックかもしれませんが、まだ私はそれを行う方法がわかりません... – prince