মাগনিফাই গ্লাস কিভাবে করবেন?
ই-কমার্স ওয়েবসাইট গুলোতে আপনি নিশ্চয় দেখেছেন, যেখানে যে কোন প্রোডাক্টের যে অংশে মাউস নিয়ে যাবেন সেই অংশকে জুমিং করে দেখানো হয়। প্রোডাক্টের ডিজাইন, মান, কালার ইত্যাদী পরিস্কার করে দেখার জন্য এই জুমিং অপশনটি রাখা হয়। জুমিং অপশন থাকলে ইউজার যে প্রোডাক্টটি ক্রয় করবেন, সে প্রোডাক্টটিকে স্বচ্ছ ভাবে দেখতে পারেন বলে এই প্লাগিনটি প্রায় সকল ই-কমার্স ওয়েবসাইটে ব্যবহ্নত হয়। আমি এখানে ছোট্ট একটি ডেমু করে দেখালাম। অন্য কোন ডিজাইনের ডেমু দেখতে চাইলে কমেন্ট করে জানাইবেন। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<title>how to create search bar</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.magnify-area {
height: 400px;
width: 300px;
margin: 100px auto;
margin-bottom: 0;
}
.magnify {
width: 200px;
position: relative;
margin: 0 auto;
}
.large {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url('images/magnify-mobile.jpg') no-repeat;
display: none;
}
.small {
display: block;
}
</style>
</head>
<body>
<div class="magnify-area">
<div class="magnify">
<div class="large"></div>
<img class="small" src="images/magnify-mobile.jpg" width="200"/>
</div>
<p style="padding:10px;">বিঃ দ্রঃ- ছবিটির উপর মাউস নিয়ে দেখুন।</p>
</div>
<script>
$(document).ready(function () {
var native_width = 0;
var native_height = 0;
$(".magnify").mousemove(function (e) {
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
} else {
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
$(".large").css({
left: px,
top: py,
backgroundPosition: bgp});
}
}
})
})
</script>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন