使用純javascript實現(xiàn)放大鏡效果
更新時間：2015年03月18日 09:40:28 投稿：hebedich
本文給大家分享的是使用純javascript實現(xiàn)放大鏡效果的代碼，并附上封裝的步驟，做電商程序的小伙伴們一定不要錯過。
jd或者淘寶的具體商品有個放大鏡的效果。雖然網(wǎng)上類似插件琳瑯滿目，應用到項目上有諸多不便，自己抽點時間自己寫了個類似插件，積累下代碼，何樂而不為呢!!let‘go:
打算把此特效封裝成個插件，先把最基本的算法實現(xiàn)，然后再一步步封裝吧：
最終實現(xiàn)效果：
html 代碼：
復制代碼 代碼如下:
<div id="Magnifier"></div>
css 代碼：
復制代碼 代碼如下:
<style>
* {
margin: 0;
padding: 0;
}
</style>
貌似什么都沒有，開始咱們強大的js之旅吧：
javascript 代碼：
復制代碼 代碼如下:
function createElement(MagnifierId, sImg, bImg) {
var Magnifier = $(MagnifierId);
Magnifier.style.position = 'relative';
//小圖div
var smallDiv = $Create("div");
smallDiv.setAttribute("id", "small");
smallDiv.style.position = "absolute";
//遮罩層
var mask = $Create("div");
mask.setAttribute("id", "mask");
mask.style.position = "absolute";
//鏡片
var mirror = $Create("div");
mirror.setAttribute("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "absolute";
mirror.style.display = "none";
//小圖
var smallImg = $Create("img");
smallImg.setAttribute("src", sImg);
smallImg.setAttribute("id", "smallImg");
smallImg.onload = function () {
//如果沒設(shè)置放大鏡的height或者width 根據(jù)小圖大小設(shè)置放大鏡大小
if (!Magnifier.offsetHeight) {
Magnifier.style.width = this.offsetWidth+"px";
Magnifier.style.height = this.offsetHeight + "px";
}
//遮罩層大小和小圖一樣
mask.style.opacity = "0";
mask.style.width = this.width + 'px';
mask.style.height = this.height + "px";
mask.style.zIndex = 2;
bigDiv.style.left = this.width + 5 + "px";
bigDiv.style.top = "-5px";
}
smallDiv.appendChild(mask);
smallDiv.appendChild(mirror);
smallDiv.appendChild(smallImg);
//視窗
var bigDiv = $Create("div");
bigDiv.setAttribute("id", "big");
bigDiv.style.position = "absolute";
bigDiv.style.overflow = "hidden";
bigDiv.style.display = "none";
var bigImg = $Create("img");
bigImg.setAttribute("src", bImg);
bigImg.setAttribute("id", "bigImg");
bigImg.style.position = "absolute";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
function setMagnifierStyle(mirrorStyle,shichuangStyle) {
//mirror
for (var item in mirrorStyle) {
mirror.style[item] = mirrorStyle[item];
}
for (var item in shichuangStyle) {
$("big").style[item] = shichuangStyle[item];
}
}
function registerEvent() {
$("mask").onmouseover = function () {
$("big").style.display = "block";
mirror.style.display = "block";
}
$("mask").onmouseout = function () {
$("big").style.display = "none";
mirror.style.display = "none";
}
$("mask").onmousemove = function (evt) {
var oEvent = evt || event;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
var mirrorLeft = disX - mirror.offsetWidth / 2;
var mirrorTop = disY - mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {
mirrorLeft = mask.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
mirrorTop = 0;
}
else if (mirrorTop > mask.offsetHeight - mirror.offsetHeight) {
mirrorTop = mask.offsetHeight - mirror.offsetHeight;
}
mirror.style.top = mirrorTop + "px";
mirror.style.left = mirrorLeft + "px";
var paX = mirrorTop / (mask.offsetHeight - mirror.offsetHeight);
var paY = mirrorLeft / (mask.offsetWidth - mirror.offsetWidth);
$("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) + "px";
$("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) + "px";
}
}
function $(id) {
return document.getElementById(id);
}
function $Create(type) {
return document.createElement(type);
}
最后再 onload小小的調(diào)用一下：
復制代碼 代碼如下:
window.onload = function () {
createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });
registerEvent();
}
效果總算出來了耶，
2. 接下來咱們封裝吧：
Magnifer類代碼：
復制代碼 代碼如下:
function Magnifier(
MagnifierId, //放大鏡容器ID
sImg, //小圖片src
bImg, //大圖片src
mirrorStyle, //小圖片里鏡片樣式，json格式數(shù)據(jù)
ViewStyle //預覽視窗樣式，json格式數(shù)據(jù)
) {
var _this = this;
this.MagnifierContainer = null; //容器
this.smallDiv = null; //小圖容器
this.mask = null; //小圖遮罩層
this.mirror = null; //小圖鏡片
this.smallImg = null; //小圖
this.bigDiv = null; //預覽視圖
this.bigImg = null; //大圖
var init = function () {
_this.MagnifierContainer = _this.$(MagnifierId);
_this.createElement(sImg, bImg);
_this.setMagnifierStyle(mirrorStyle, ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement = function (sImg, bImg) {
var _this = this;
var $Create = this.$Create;
this.MagnifierContainer.style.position = 'relative'; //脫離文檔流，視情況修改
this.smallDiv = $Create("div");
this.smallDiv.setAttribute("id", "small");
this.smallDiv.style.position = "absolute";
this.mask = $Create("div");
this.mask.setAttribute("id", "mask");
this.mask.style.position = "absolute";
this.mirror = $Create("div");
this.mirror.setAttribute("id", "mirror");
this.mirror.style.opacity = 0.3;
this.mirror.style.position = "absolute";
this.mirror.style.display = "none";
this.smallImg = $Create("img");
this.smallImg.setAttribute("src", sImg);
this.smallImg.setAttribute("id", "smallImg");
this.smallImg.onload = function () {
//如果沒設(shè)置放大鏡的height或者width 根據(jù)小圖大小設(shè)置放大鏡大小
if (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth + "px";
_this.MagnifierContainer.style.height = this.offsetHeight + "px";
}
//遮罩層大小和小圖一樣
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetWidth + 'px';
_this.mask.style.height = this.offsetHeight + "px";
_this.mask.style.zIndex = 2;
_this.bigDiv.style.left = this.offsetWidth + 5 + "px";
_this.bigDiv.style.top = "-5px";
}
this.smallDiv.appendChild(this.mask);
this.smallDiv.appendChild(this.mirror);
this.smallDiv.appendChild(this.smallImg);
this.bigDiv = $Create("div");
this.bigDiv.setAttribute("id", "big");
this.bigDiv.style.position = "absolute";
this.bigDiv.style.overflow = "hidden";
this.bigDiv.style.display = "none";
this.bigImg = $Create("img");
this.bigImg.setAttribute("src", bImg);
this.bigImg.setAttribute("id", "bigImg");
this.bigImg.style.position = "absolute";
this.bigDiv.appendChild(this.bigImg);
this.MagnifierContainer.appendChild(this.smallDiv);
this.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) {
for (var item in mirrorStyle) {
this.mirror.style[item] = mirrorStyle[item];
}
delete item;
for (var item in ViewStyle) {
this.bigDiv.style[item] = ViewStyle[item];
}
}
Magnifier.prototype.MainEvent = function () {
var _this = this;
this.mask.onmouseover = function () {
_this.bigDiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = function () {
_this.bigDiv.style.display = "none";
_this.mirror.style.display = "none";
}
this.mask.onmousemove = function (evt) {
var oEvent = evt || event;
var disX = oEvent.offsetX || oEvent.layerX; //兼容ff
var disY = oEvent.offsetY || oEvent.layerY;
var mirrorLeft = disX - _this.mirror.offsetWidth / 2;
var mirrorTop = disY - _this.mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
mirrorTop = 0;
}
else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {
mirrorTop = this.offsetHeight - _this.mirror.offsetHeight;
}
_this.mirror.style.top = mirrorTop + "px";
_this.mirror.style.left = mirrorLeft + "px";
var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
var paY = mirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth);
_this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) + "px";
_this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) + "px";
}
}
Magnifier.prototype.$ = function (id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = function (type) {
return document.createElement(type);
}
最后在onload調(diào)用下：
復制代碼 代碼如下:
window.onload = function () {
new Magnifier(
"Magnifier",
"images/Magnifier/small.jpg",
"images/Magnifier/big.jpg",
{ "width": "30px", "height": "30px", "backgroundColor": "#fff" },
{ "width": "250px", "height": "250px" }
);
}
以上就是本文所述的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)
這篇文章主要介紹了最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家介紹了Three.js中實現(xiàn)Bloom效果及完整示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
下面小編就為大家?guī)硪黄狫S驗證圖片格式和大小并預覽的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了redux-saga 初識和使，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
JS實現(xiàn)隱藏同級元素后只顯示JS文件內(nèi)容的方法
這篇文章主要介紹了JS實現(xiàn)隱藏同級元素后只顯示JS文件內(nèi)容的方法,可實現(xiàn)將與js文件的同級元素全部隱藏,只顯示js文件內(nèi)容的功能,涉及javascript針對頁面元素的遍歷與屬性修改相關(guān)技巧,需要的朋友可以參考下2016-09-09
今天在為網(wǎng)站增加一些代碼功能的時候，需要用到if條件判斷，發(fā)現(xiàn)簡寫方法忘了，這里特整理下2014-05-05
javascirpt實現(xiàn)2個iframe之間傳值的方法
這篇文章主要介紹了javascirpt實現(xiàn)2個iframe之間傳值的方法,涉及javascript針對iframe框架下的頁面元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
我們大家都知道，對于一個網(wǎng)站最占用帶寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，作為一個站長我們是千方百計的使用各種技巧來優(yōu)化圖片，但其實有一種簡單的方法，只需要幾行代碼就能達到這種效果。同時還附加一種淡入淡出的顯示效果，下面一起來看看。2016-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了javascript編寫實用的省市選擇器的方法及示例分享，非常不錯，推薦給有相同需求的小伙伴們。2015-02-02