JQUERY实现放大镜
生活随笔
收集整理的這篇文章主要介紹了
JQUERY实现放大镜
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
}
#left {
width: 430px;
height: 430px;
position: relative;
}
#inner {
display: none;
width: 231px;
height: 231px;
background-image: url(../images/21_03.png);
opacity: 0.7;
position: absolute;
left: 0;
top: 0;
}
#tags li {
width: 60px;
height: 60px;
list-style: none;
float: left;
}
#right {
width: 430px;
height: 430px;
/*border: 1px solid red;*/
position: absolute;
left: 500px;
top: 0;
overflow: hidden;
}
#right img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src="../images/imgA_2.jpg">
<div id="inner"></div>
</div>
<ul id="tags">
<li><img src="../images/imgA_1.jpg"></li>
<li><img src="../images/imgB_1.jpg"></li>
<li><img src="../images/imgC_1.jpg"></li>
<li><img src="../images/imgD_1.jpg"></li>
</ul>
<div id="right"></div>
</div>
<script src="../js/jquery-1.12.4.js"></script>
<script >
$(function(){
var setPosition;
if((/IE [678]/).test(navigator.userAgent)){
setPosition=function(JDOM,x,y){
JDOM.css({
left:x+'px',
top:y+'px'
});
}
}else{
setPosition=function(JDOM,x,y){
JDOM.css({
transform:'translate('+x+'px,'+y+'px)',
WebkitTransform:'translate('+x+'px,'+y+'px)',
MozTransform:'translate('+x+'px,'+y+'px)',
OTransform:'translate('+x+'px,'+y+'px)',
msTransform:'translate('+x+'px,'+y+'px)'
})
}
}
$('#tags').on('mouseenter','li img',function(){
var imgPath=$(this).prop('src');
//console.log(newPath);
var newImgPath=imgPath.replace(/_1/,'_2');
//console.log(newImgPath);
$('#left img').prop('src',newImgPath);
});
$('#left').on('mouseenter',function(){
$('#inner').show();
var imgPath=$('#left img').prop('src');
$('<img>').prop('src',imgPath.replace(/_2/,'_3')).appendTo($('#right'));
}).on('mousemove','#inner',function(event){
var x=event.pageX-115.5-$('#left').offset().left;
if(x<0){
x=0;
}else if(x>199){
x=199;
}
var y=event.pageY-115.5-$('#left').offset().top;
if(y<0){
y=0;
}else if(y>199){
y=199;
}
setPosition($('#inner'),x,y);
setPosition($('#right img'),-x*800/430,-y*800/430);
}).on('mouseleave',function(){
$('#inner').hide();
$('#right').hide(); });});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
}
#left {
width: 430px;
height: 430px;
position: relative;
}
#inner {
display: none;
width: 231px;
height: 231px;
background-image: url(../images/21_03.png);
opacity: 0.7;
position: absolute;
left: 0;
top: 0;
}
#tags li {
width: 60px;
height: 60px;
list-style: none;
float: left;
}
#right {
width: 430px;
height: 430px;
/*border: 1px solid red;*/
position: absolute;
left: 500px;
top: 0;
overflow: hidden;
}
#right img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src="../images/imgA_2.jpg">
<div id="inner"></div>
</div>
<ul id="tags">
<li><img src="../images/imgA_1.jpg"></li>
<li><img src="../images/imgB_1.jpg"></li>
<li><img src="../images/imgC_1.jpg"></li>
<li><img src="../images/imgD_1.jpg"></li>
</ul>
<div id="right"></div>
</div>
<script src="../js/jquery-1.12.4.js"></script>
<script >
$(function(){
var setPosition;
if((/IE [678]/).test(navigator.userAgent)){
setPosition=function(JDOM,x,y){
JDOM.css({
left:x+'px',
top:y+'px'
});
}
}else{
setPosition=function(JDOM,x,y){
JDOM.css({
transform:'translate('+x+'px,'+y+'px)',
WebkitTransform:'translate('+x+'px,'+y+'px)',
MozTransform:'translate('+x+'px,'+y+'px)',
OTransform:'translate('+x+'px,'+y+'px)',
msTransform:'translate('+x+'px,'+y+'px)'
})
}
}
$('#tags').on('mouseenter','li img',function(){
var imgPath=$(this).prop('src');
//console.log(newPath);
var newImgPath=imgPath.replace(/_1/,'_2');
//console.log(newImgPath);
$('#left img').prop('src',newImgPath);
});
$('#left').on('mouseenter',function(){
$('#inner').show();
var imgPath=$('#left img').prop('src');
$('<img>').prop('src',imgPath.replace(/_2/,'_3')).appendTo($('#right'));
}).on('mousemove','#inner',function(event){
var x=event.pageX-115.5-$('#left').offset().left;
if(x<0){
x=0;
}else if(x>199){
x=199;
}
var y=event.pageY-115.5-$('#left').offset().top;
if(y<0){
y=0;
}else if(y>199){
y=199;
}
setPosition($('#inner'),x,y);
setPosition($('#right img'),-x*800/430,-y*800/430);
}).on('mouseleave',function(){
$('#inner').hide();
$('#right').hide(); });});
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/xingxing88/p/6036449.html
總結
以上是生活随笔為你收集整理的JQUERY实现放大镜的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Racket 6.7最新版本：提供对An
- 下一篇： webGIS（离线版）研究路线归总