局部放大效果、插件
HTML部分
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/fangda.css" />
</head>
<script type="text/javascript" src="js/fangda.js"></script>
<body>
<div id="main">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</body>
</html>
CSS部分
#main {
margin:30px;
}
#main img {
width:200px;
height:200px;
}
?
JS部分
window.onload = function() {
fangda('main', 120, 100, 'blue', 0.6, 3, 'http://www.jq22.com/img/cs/500x500-1.png')
}
//window.onload 之后圖片才加載完，才能獲取寬高
var fangda = function(mainId, boxWidth, boxHeight, bgcolor, opacity, multiple, imgsrc) {
//獲取主容器
var main = document.getElementById(mainId);
//獲取圖片
var img = main.getElementsByTagName('img')[0];
//獲取圖片寬高，設置給其父容器
var imgW = img.offsetWidth;
var imgH = img.offsetHeight;
main.style.width = imgW + 'px';
main.style.height = imgH + 'px';
main.style.position = 'relative';
//hidden為了后面的方塊在鼠標移出后消失
main.style.overflow = 'hidden';
//動態創建放大的小方塊，設置屬性，并且添加到main內
var box = document.createElement("div");
box.style.width = boxWidth + 'px';
box.style.height = boxHeight + 'px';
box.style.backgroundColor = bgcolor;
box.style.opacity = opacity;
//設置絕對定位時，要想起來給其父容器設置相對定位
box.style.position = 'absolute';
box.style.top = 0;
box.style.left = 0;
box.style.cursor = 'move';
//none是為了一開始隱藏，鼠標移入main再顯示
box.style.display = 'none';
main.appendChild(box);
?
//給main添加鼠標移入事件
//移入顯示box
main.onmouseover = function() {
box.style.display = 'block';
showBox.style.display = 'block';
showBox.style.zIndex = 999;
}
//移出隱藏box
main.onmouseout = function() {
box.style.display = 'none';
showBox.style.display = 'none';
showBox.style.zIndex = -999;
}
//設置main的鼠標移動事件，帶著box走
//提前獲取一些值
//獲取main距離左邊與頂部的距離
var mainL = main.offsetLeft;
var mainT = main.offsetTop;
//獲取main和box的寬高;
var mainW = main.offsetWidth;
var mainH = main.offsetHeight;
//getComputedStyle(box).width獲取到的是帶有單位px的值，需要轉化為整數
var boxW = parseInt(getComputedStyle(box).width);
var boxH = parseInt(getComputedStyle(box).height);
//動態創建顯示的容器以及其內的圖片,為了使用mainL等已經獲取的值
//并且設置其屬性
var showBox = document.createElement("div");
showBox.style.width = boxWidth * multiple + 'px';
showBox.style.height = boxHeight * multiple + 'px';
showBox.style.position = 'fixed';
showBox.style.left = (mainL + mainW + 5) + 'px';
showBox.style.top = mainT + 'px';
showBox.style.overflow = 'hidden';
showBox.style.display = 'none';
showBox.style.zIndex = -999;
//創建圖片
var showImg = document.createElement("img");
if (imgsrc == '') {
showImg.src = img.src;
} else {
showImg.src = imgsrc;
}
showImg.style.width = imgW * multiple + 'px';
showImg.style.height = imgH * multiple + 'px';
showImg.style.position = 'absolute';
//把圖片添加到showBox內，
showBox.appendChild(showImg);
//再把showBox添加到body內
document.getElementsByTagName('body')[0].appendChild(showBox)
main.onmousemove = function(event) {
//獲取鼠標位置
var x = event.pageX;
var y = event.pageY;
//把獲取box的寬高放在顯示之后才能獲取到，若想在之前獲取，用getComputedStyle(box).width
// var boxW = box.offsetWidth;
// var boxH = box.offsetHeight;
//對box的left和top進行賦值
//賦值前進行判斷。讓box不能超出main范圍
var left = x - mainL - boxW / 2;
var top = y - mainT - boxH / 2;
if (left <= 0) {
left = 0;
}
if (top <= 0) {
top = 0;
}
if (left >= mainW - boxW) {
left = mainW - boxW;
}
if (top >= mainH - boxH) {
top = mainH - boxH;
}
box.style.left = left + 'px';
box.style.top = top + 'px';
//根據放大倍數設置showImg的位置
showImg.style.left = -left * multiple + 'px'
showImg.style.top = -top * multiple + 'px';
}
}
?
轉載于:https://www.cnblogs.com/L-Y-F/p/8554845.html
總結
- 上一篇： 计算机专业ps,计算机专业PS试题
- 下一篇： 2020CCPC长春