マウスの上のjQueryイメージ拡大鏡
3510 ワード
このチュートリアルでは、マウスのJQueryイメージ拡大鏡を参照してください.イメージ拡大鏡を使用すると、マウスのホバーで画像を拡大することができます.jQueryを使用してマウスのホバーで画像をズームできます.また、JQueryイメージズームアウトマウスクリックでズームすることができます.
この例では、ユーザーが直接マウスホイールやピンチのJavaScriptを使用してタッチデバイス上でズームやJPEGを使用してマウスのイメージズームをズームすることができます.
また、ズーム画像のプラグインの種類を使用することができます.ここではズームを使用しています.JS CDNズームや拡大画像.ズームを使用します.ユーザーがマウスの動きでホバーやビューの詳細にフルサイズの画像を表示できるJSのjQuery.
だから、マウスのホバーでjQueryイメージ拡大鏡を参照してください、マウスのホバー効果のイメージを拡大する.
例:
出力:
閉じるこの動画はお気に入りから削除されています Read Also : Laravel REST API CRUD Tutorial Read Also : Laravel 8 Generate PDF Using DomPDF Read Also : How To Hide Toolbar In Summernote Editor
この例では、ユーザーが直接マウスホイールやピンチのJavaScriptを使用してタッチデバイス上でズームやJPEGを使用してマウスのイメージズームをズームすることができます.
また、ズーム画像のプラグインの種類を使用することができます.ここではズームを使用しています.JS CDNズームや拡大画像.ズームを使用します.ユーザーがマウスの動きでホバーやビューの詳細にフルサイズの画像を表示できるJSのjQuery.
だから、マウスのホバーでjQueryイメージ拡大鏡を参照してください、マウスのホバー効果のイメージを拡大する.
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js"></script>
<style>
body {
margin: 20px;
border: 1px solid grey;
}
.container {
display: block;
padding: 0px;
}
.contain {
position: fixed;
right: 10%;
top: 25%;
width: 200px;
height: 220px;
margin-top: 25px;
}
img {
width: 250px;
height: 250px;
margin: 20px;
}
b{
margin-left: 20px;
}
</style>
</head>
<body>
<center>
<h1>jQuery Image Magnifier On Mouse Hover - Techsolutionstuff</h1>
</center>
<div class="container-fluid">
<b>Move your Cursor Over the Image</b>
<div class="parent">
<img src="https://laravelnews.imgix.net/laravel-news__logo.png?ixlib=php-3.3.1">
</div>
<span class="contain"></span>
</div>
<script>
$(document).ready(function() {
$('.parent').css('width', $('img').width());
$('img').parent().zoom({
magnify: 1,
target: $('.contain').get(0)
});
});
</script>
</body>
</html>
出力:
閉じるこの動画はお気に入りから削除されています
Reference
この問題について(マウスの上のjQueryイメージ拡大鏡), 我々は、より多くの情報をここで見つけました https://dev.to/techsolutionstuff/jquery-image-magnifier-on-mouse-hover-16mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol