<强>将鼠标移动至图片区域可放大预览
<>强效果图:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
*{填充:0;保证金:0;}
# img1{宽度:300 px;身高:200 px;}
# sp1{宽度:60 px;高度:40像素;位置:绝对的;左:0;上图:0;背景:rgba(62年,55岁,58岁的0.4)
}
# img2{宽度:2250 px;身高:1500 px;位置:绝对的,}
div{宽度:450 px;身高:300 px;位置:绝对的;左:310 px;上图:0;溢出:隐藏;边界:2 px固体黑色;显示:没有;}
& lt;/style>
& lt; script>
window=function () {
var img1=. getelementbyid (“img1”);
var img2=. getelementbyid (“img2”);
var sp=. getelementbyid (sp1);
var oBox=. getelementbyid(盒);
sp.onmouseover=function () {
oBox.style.display=翱椤?
};
sp.onmouseout=function () {
oBox.style.display='没有';
};
document.onmousemove=function (ev) {
var x=(ev。clientX | | event.clientX) -sp.offsetWidth/2;
var y=(ev。clientY | | event.clientY) -sp.offsetHeight/2;
如果(ev。clientX | | event.clientX) & lt; sp.offsetWidth/2) {
x=0;
}
如果(ev。clientX | | event.clientX)祝辞img1.offsetWidth-sp.offsetWidth/2) {
x=img1.offsetWidth-sp.offsetWidth;
}
如果(ev。clientY | | event.clientY) & lt; sp.offsetHeight/2) {
y=0;
如果(ev}。clientY | | event.clientY)祝辞img1.offsetHeight-sp.offsetHeight/2) {
y=img1.offsetHeight-sp.offsetHeight;
}
如果(ev。clientX | | event.clientX) & lt; 300年,,(电动汽车。clientY | | event.clientY) & lt; 200) {
sp.style。左=x +“px”;
sp.style。顶级=y +“px”;
img2.style。左=- x * (img2。offsetWidth/img1.offsetWidth) +“px”;
img2.style。=- y * (img2。offsetHeight/img1.offsetHeight) +“px”;
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; img src=" https://timgsa.baidu.com/timg& # 63; image&质量=80,大?b9999_10000&秒=1489083204637,di=244 fe324db033fc826de48e90d2373f0& imgtype=0和3 src=http % % 2 f % 2 fpic2015.5442.com % 2 f2016 % 2 f0328 % 2 f025 % 2 f5.jpg % 2521960. jpg
" id=" img1”比;
& lt;跨度id=" sp1 "祝辞& lt;/span>
& lt; div id=昂凶印北?
& lt; img src=" https://timgsa.baidu.com/timg& # 63; image&质量=80,大?b9999_10000&秒=1489083204637,di=244 fe324db033fc826de48e90d2373f0& imgtype=0和3 src=http % % 2 f % 2 fpic2015.5442.com % 2 f2016 % 2 f0328 % 2 f025 % 2 f5.jpg % 2521960. jpg
" id=" img2”比;
& lt;/div>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
