Rumah >hujung hadapan web >tutorial js >Gunakan javascript tulen untuk mencapai kemahiran effect_javascript kaca pembesar
Gunakan javascript tulen untuk mencapai kemahiran effect_javascript kaca pembesar
- WBOYasal
- 2016-05-16 16:08:551019semak imbas
Produk khusus JD atau Taobao mempunyai kesan kaca pembesar. Walaupun terdapat banyak pemalam yang serupa di Internet, terdapat banyak kesulitan dalam menerapkannya pada projek Jika anda mengambil sedikit masa untuk menulis pemalam yang serupa dan mengumpul kod, mengapa tidak melakukannya!! 🎜>
Saya bercadang untuk merangkum kesan khas ini ke dalam pemalam Mula-mula melaksanakan algoritma yang paling asas, dan kemudian merangkumnya langkah demi langkah:
kod html:
Salin kod Kod adalah seperti berikut:
kod css:
Salin kod Kod adalah seperti berikut:
* {
jidar: 0;
pelapik: 0;
}
kod javascript:
Salin kod Kod adalah seperti berikut:
fungsi createElement(MagnifierId, sImg, bImg) {
var Magnifier = $(MagnifierId);
Magnifier.style.position = 'relative';
//小图div
var smallDiv = $Create("div");
smallDiv.setAttribute("id", "small");
smallDiv.style.position = "mutlak";
//遮罩层
var mask = $Create("div");
mask.setAttribute("id", "mask");
mask.style.position = "mutlak";
//镜片
var mirror = $Create("div");
mirror.setAttribute("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "mutlak";
mirror.style.display = "tiada";
//小图
var smallImg = $Create("img");
smallImg.setAttribute("src", sImg);
smallImg.setAttribute("id", "smallImg");
smallImg.onload = fungsi () {
//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
jika (!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(topeng);
smallDiv.appendChild(cermin);
smallDiv.appendChild(smallImg);
//视窗
var bigDiv = $Create("div");
bigDiv.setAttribute("id", "big");
bigDiv.style.position = "mutlak";
bigDiv.style.overflow = "tersembunyi";
bigDiv.style.display = "tiada";
var bigImg = $Create("img");
bigImg.setAttribute("src", bImg);
bigImg.setAttribute("id", "bigImg");
bigImg.style.position = "mutlak";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
fungsi setMagnifierStyle(mirrorStyle,shichuangStyle) {
//cermin
untuk (item var dalam mirrorStyle) {
mirror.style[item] = mirrorStyle[item];
}
untuk (item var dalam shichuangStyle) {
$("besar").style[item] = shichuangStyle[item];
}
}
function registerEvent() {
$("topeng").onmouseover = fungsi () {
$("big").style.display = "block";
mirror.style.display = "block";
}
$("topeng").onmouseout = fungsi () {
$("besar").style.display = "tiada";
mirror.style.display = "tiada";
}
$("topeng").onmousemove = fungsi (evt) {
var oEvent = evt || acara;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
var mirrorLeft = disX - mirror.offsetWidth / 2;
var mirrorTop = disY - mirror.offsetHeight / 2;
jika (cermin Kiri < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {
mirrorLeft = mask.offsetWidth - mirror.offsetWidth;
}
jika (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";
}
}
fungsi $(id) {
kembalikan document.getElementById(id);
}
fungsi $Create(type) {
kembalikan document.createElement(type);
}
window.onload = fungsi () {
createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
setMagnifierStyle({ "lebar": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });
registerEvent();
}
fungsi Pembesar(
Pembesar, // membesarkan ID bekas cermin
sImg, bImg, MirrorStyle, // Dalam gaya kanta gambar kecil, data format json
) {
var _ini = ini;
This.MagnifierContainer = null; //Bekas
This.smallDiv = null; //Bekas imej kecil
This.mask = null; //Lapisan topeng imej kecil
this.mirror = null; This.smallImg = null; //Imej kecil
This.bigDiv = null; //Pratonton paparan
This.bigImg = null; var init = fungsi () {
_this.MagnifierContainer = _this.$(MagnifierId);
_this.createElement(sImg, bImg);
_this.setMagnifierStyle(mirrorStyle, ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement = fungsi (sImg, bImg) {
var _ini = ini;
var $Create = ini.$Create;
This.MagnifierContainer.style.position = 'relative'; //Keluar daripada aliran dokumen dan ubah suai mengikut kesesuaian
This.smallDiv = $Create("div");
This.smallDiv.setAttribute("id", "small");
This.smallDiv.style.position = "mutlak";
This.mask = $Create("div");
This.mask.setAttribute("id", "mask");
This.mask.style.position = "mutlak";
This.mirror = $Create("div");
This.mirror.setAttribute("id", "mirror");
This.mirror.style.opacity = 0.3;
This.mirror.style.position = "mutlak";
This.mirror.style.display = "tiada";
This.smallImg = $Create("img");
This.smallImg.setAttribute("src", sImg);
This.smallImg.setAttribute("id", "smallImg");
This.smallImg.onload = fungsi () {
//Jika ketinggian atau lebar kaca pembesar tidak ditetapkan, tetapkan saiz kaca pembesar mengikut saiz lakaran kecil
Jika (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth "px";
_this.MagnifierContainer.style.height = this.offsetHeight "px";
}
//Saiz lapisan topeng adalah sama dengan imej kecil
_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.cermin);
This.smallDiv.appendChild(this.smallImg);
This.bigDiv = $Create("div");
This.bigDiv.setAttribute("id", "big");
This.bigDiv.style.position = "mutlak";
This.bigDiv.style.overflow = "tersembunyi";
This.bigDiv.style.display = "tiada";
This.bigImg = $Create("img");
This.bigImg.setAttribute("src", bImg);
This.bigImg.setAttribute("id", "bigImg");
This.bigImg.style.position = "mutlak";
This.bigDiv.appendChild(this.bigImg);
This.MagnifierContainer.appendChild(this.smallDiv);
This.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle = fungsi (mirrorStyle, ViewStyle) {
untuk (item var dalam mirrorStyle) {
this.mirror.style[item] = mirrorStyle[item];
}
padamkan item;
untuk (item var dalam ViewStyle) {
this.bigDiv.style[item] = ViewStyle[item];
}
}
Magnifier.prototype.MainEvent = fungsi () {
var _ini = ini;
this.mask.onmouseover = fungsi () {
_this.bigDiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = fungsi () {
_this.bigDiv.style.display = "tiada";
_this.mirror.style.display = "tiada";
}
this.mask.onmousemove = fungsi (evt) {
var oEvent = evt || acara;
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;
jika (cermin Kiri < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth - mirror.offsetWidth;
}
jika (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.$ = Funktion (id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = Funktion (Typ) {
return document.createElement(type);
}
window.onload = function () {
neue Lupe(
„Lupe“,
"images/Magnifier/small.jpg",
"images/Magnifier/big.jpg",
{ "width": "30px", "height": "30px", "backgroundColor": "#fff" },
{ "width": "250px", "height": "250px" }
);
}
fungsi createElement(MagnifierId, sImg, bImg) {
var Magnifier = $(MagnifierId);
Magnifier.style.position = 'relative';
//小图div
var smallDiv = $Create("div");
smallDiv.setAttribute("id", "small");
smallDiv.style.position = "mutlak";
//遮罩层
var mask = $Create("div");
mask.setAttribute("id", "mask");
mask.style.position = "mutlak";
//镜片
var mirror = $Create("div");
mirror.setAttribute("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "mutlak";
mirror.style.display = "tiada";
//小图
var smallImg = $Create("img");
smallImg.setAttribute("src", sImg);
smallImg.setAttribute("id", "smallImg");
smallImg.onload = fungsi () {
//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
jika (!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(topeng);
smallDiv.appendChild(cermin);
smallDiv.appendChild(smallImg);
//视窗
var bigDiv = $Create("div");
bigDiv.setAttribute("id", "big");
bigDiv.style.position = "mutlak";
bigDiv.style.overflow = "tersembunyi";
bigDiv.style.display = "tiada";
var bigImg = $Create("img");
bigImg.setAttribute("src", bImg);
bigImg.setAttribute("id", "bigImg");
bigImg.style.position = "mutlak";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
fungsi setMagnifierStyle(mirrorStyle,shichuangStyle) {
//cermin
untuk (item var dalam mirrorStyle) {
mirror.style[item] = mirrorStyle[item];
}
untuk (item var dalam shichuangStyle) {
$("besar").style[item] = shichuangStyle[item];
}
}
function registerEvent() {
$("topeng").onmouseover = fungsi () {
$("big").style.display = "block";
mirror.style.display = "block";
}
$("topeng").onmouseout = fungsi () {
$("besar").style.display = "tiada";
mirror.style.display = "tiada";
}
$("topeng").onmousemove = fungsi (evt) {
var oEvent = evt || acara;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
var mirrorLeft = disX - mirror.offsetWidth / 2;
var mirrorTop = disY - mirror.offsetHeight / 2;
jika (cermin Kiri < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {
mirrorLeft = mask.offsetWidth - mirror.offsetWidth;
}
jika (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";
}
}
fungsi $(id) {
kembalikan document.getElementById(id);
}
fungsi $Create(type) {
kembalikan document.createElement(type);
}
最后再 onload小小的调用一下：
复制代码 代码如下:
window.onload = fungsi () {
createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
setMagnifierStyle({ "lebar": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });
registerEvent();
}
效果总算出来了耶，
2. 接下来咱们封装吧：
Magnifer类代码：
复制代码 代码如下:
fungsi Pembesar(
Pembesar, // membesarkan ID bekas cermin
sImg, bImg, MirrorStyle, // Dalam gaya kanta gambar kecil, data format json
) {
var _ini = ini;
This.MagnifierContainer = null; //Bekas
This.smallDiv = null; //Bekas imej kecil
This.mask = null; //Lapisan topeng imej kecil
this.mirror = null; This.smallImg = null; //Imej kecil
This.bigDiv = null; //Pratonton paparan
This.bigImg = null; var init = fungsi () {
_this.MagnifierContainer = _this.$(MagnifierId);
_this.createElement(sImg, bImg);
_this.setMagnifierStyle(mirrorStyle, ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement = fungsi (sImg, bImg) {
var _ini = ini;
var $Create = ini.$Create;
This.MagnifierContainer.style.position = 'relative'; //Keluar daripada aliran dokumen dan ubah suai mengikut kesesuaian
This.smallDiv = $Create("div");
This.smallDiv.setAttribute("id", "small");
This.smallDiv.style.position = "mutlak";
This.mask = $Create("div");
This.mask.setAttribute("id", "mask");
This.mask.style.position = "mutlak";
This.mirror = $Create("div");
This.mirror.setAttribute("id", "mirror");
This.mirror.style.opacity = 0.3;
This.mirror.style.position = "mutlak";
This.mirror.style.display = "tiada";
This.smallImg = $Create("img");
This.smallImg.setAttribute("src", sImg);
This.smallImg.setAttribute("id", "smallImg");
This.smallImg.onload = fungsi () {
//Jika ketinggian atau lebar kaca pembesar tidak ditetapkan, tetapkan saiz kaca pembesar mengikut saiz lakaran kecil
Jika (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth "px";
_this.MagnifierContainer.style.height = this.offsetHeight "px";
}
//Saiz lapisan topeng adalah sama dengan imej kecil
_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.cermin);
This.smallDiv.appendChild(this.smallImg);
This.bigDiv = $Create("div");
This.bigDiv.setAttribute("id", "big");
This.bigDiv.style.position = "mutlak";
This.bigDiv.style.overflow = "tersembunyi";
This.bigDiv.style.display = "tiada";
This.bigImg = $Create("img");
This.bigImg.setAttribute("src", bImg);
This.bigImg.setAttribute("id", "bigImg");
This.bigImg.style.position = "mutlak";
This.bigDiv.appendChild(this.bigImg);
This.MagnifierContainer.appendChild(this.smallDiv);
This.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle = fungsi (mirrorStyle, ViewStyle) {
untuk (item var dalam mirrorStyle) {
this.mirror.style[item] = mirrorStyle[item];
}
padamkan item;
untuk (item var dalam ViewStyle) {
this.bigDiv.style[item] = ViewStyle[item];
}
}
Magnifier.prototype.MainEvent = fungsi () {
var _ini = ini;
this.mask.onmouseover = fungsi () {
_this.bigDiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = fungsi () {
_this.bigDiv.style.display = "tiada";
_this.mirror.style.display = "tiada";
}
this.mask.onmousemove = fungsi (evt) {
var oEvent = evt || acara;
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;
jika (cermin Kiri < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth - mirror.offsetWidth;
}
jika (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.$ = Funktion (id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = Funktion (Typ) {
return document.createElement(type);
}
最后在onload调用下:
复制代码 代码如下:
window.onload = function () {
neue Lupe(
„Lupe“,
"images/Magnifier/small.jpg",
"images/Magnifier/big.jpg",
{ "width": "30px", "height": "30px", "backgroundColor": "#fff" },
{ "width": "250px", "height": "250px" }
);
}
以上就是本文所述的全部内容了，希望大家能够喜欢.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kesan seret dan lepas mudah menggunakan kemahiran js_javascriptArtikel seterusnya：Kesan seret dan lepas mudah menggunakan kemahiran js_javascript
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional