原生js方大镜小例子
1效果图2html3css4js5结构目录6图片7总结
1效果图
在图片区域选中 左侧出现放大区域
2html
<body>
<div id="min_tu">
<img src="imgs/3.jpg" />
<div id="fdj"></div>
</div>
<div id="list">
<ul>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
</ul>
</div>
<div id="max_tu">
<img id="bigPic" src="imgs/3.jpg" />
</div>
</body>
3css
<head>
<meta charset="UTF-8">
<title>放大镜2</title>
<style type="text/css">
* {
margin: 0px
;
padding: 0px
;
list-style: none
;
}
#min_tu {
width: 400px
;
height: 400px
;
border: 1px solid #333
;
margin: 70px 0px 0px 100px
;
position: relative
;
}
#min_tu>img {
width: 100%
;
}
#fdj {
width: 160px
;
height: 160px
;
background-color: yellow
;
opacity: 0.4
;
position: absolute
;
left: 0px
;
top: 0px
;
display: none
;
}
#max_tu {
width: 400px
;
height: 400px
;
position: absolute
;
top: 70px
;
left: 521px
;
border: 1px solid #333
;
overflow: hidden
;
display: none
;
}
#max_tu>img {
position: absolute
;
left: -500px
;
}
#list {
width: 400px
;
height: 100px
;
margin: 5px 0px 0px 100px
;
border: 1px solid #333
;
}
#list>ul>li {
height: 100px
;
float: left
;
}
#list>ul>li>img {
height: 100%
;
}
</style>
</head>
4js
<script type
="text/javascript">
var mymin_tu
= document
.getElementById("min_tu");
var myfdj
= document
.getElementById("fdj");
var mymax_tu
= document
.getElementById("max_tu");
var mybigPic
= document
.getElementById("bigPic");
var mylist
= document
.getElementById("list");
var minL
= mymin_tu
.offsetLeft
;
var minT
= mymin_tu
.offsetTop
;
var minW
= mymin_tu
.offsetWidth
;
var minH
= mymin_tu
.offsetHeight
;
var imgW
= 0;
var imgH
= 0;
var fdjW
= 0;
var fdjH
= 0;
mymin_tu
.onmouseover = function() {
myfdj
.style
.display
= "block";
mymax_tu
.style
.display
= "block";
fdjW
= myfdj
.offsetWidth
;
fdjH
= myfdj
.offsetHeight
;
imgW
= mybigPic
.offsetWidth
;
imgH
= mybigPic
.offsetHeight
;
}
mymin_tu
.onmouseout = function() {
myfdj
.style
.display
= "none";
mymax_tu
.style
.display
= "none";
}
mymin_tu
.onmousemove = function(e
) {
var e
= e
|| window
.event
;
var x
= e
.pageX
;
var y
= e
.pageY
;
var l
= x
- minL
- fdjW
/ 2;
var t
= y
- minT
- fdjH
/ 2;
var XL = minW
- fdjW
- 2;
var YL = minH
- fdjH
- 2;
if(l
>= XL) {
l
= XL;
}
if(l
<= 0) {
l
= 0;
}
if(t
>= YL) {
t
= YL;
}
if(t
<= 0) {
t
= 0;
}
myfdj
.style
.left
= l
+ 'px';
myfdj
.style
.top
= t
+ 'px';
var bigL
= -imgW
* l
/ minW
;
var bigT
= -imgH
* t
/ minH
;
mybigPic
.style
.left
= bigL
+ "PX";
mybigPic
.style
.top
= bigT
+ "PX";
}
var myli
= mylist
.children
[0].children
;
var len
= myli
.length
;
for(var i
= 0; i
< myli
.length
; i
++) {
myli
[i
].onclick = function() {
mymin_tu
.children
[0].src
= this.children
[0].src
;
mybigPic
.src
= this.children
[0].src
;
}
}
</script
>
5结构目录
6图片
7总结
把css、html、js放到html标签中即可
