您的位置：首页 > Web前端 > JQuery

jQuery入门之放大镜案例（js touch触屏特效）

2017-05-16 16:54 411 查看

首先在这里我们创建一个空的web Form 项目建立如下

在这里 css中有一些重叠样式表，images里有有两张图片分别是一大一小两张图片
js里引用的库，下面是连接
/*

* jQuery JavaScript Library v1.4.4

* http://jquery.com/
*

*/
下面时页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/163css.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="box-163css">
<div id="zoom-s">
<img src="images/img01s.jpg" _src="images/img01.jpg" id="img1"/>
<div id="mark"></div>
<span></span>
</div>
<div id="zoom-b"></div>
</div>
<script>
$(function(){
var _src =$('#img1').attr('_src');
$('#zoom-b').append('<img>');
$('#mark').mouseover(function(){
$('#zoom-b img').attr('src',_src);
$('span').css('display','block');
$('#zoom-b').css('display','block');
});
$('#mark').mouseout(function(){
$('span').css('display','none');
$('#zoom-b').css('display','none');
});

$('#mark').mousemove(function(ev){
var l=ev.clientX - $('#zoom-s').offset().left - $('span').width()/2;
var t=ev.clientY - $('#zoom-s').offset().top - $('span').height()/2;
if(l<0){
l=0;
}
else if(l>$('#zoom-s').width() - $('span').width()){
l=$('#zoom-s').width()-$('span').width();
}
if(t<0){
t=0;
}
else if(t>$('#zoom-s').height() - $('span').height()){
t=$('#zoom-s').height() - $('span').height();
}
$('span').css('left',l)
$('span').css('top',t)
var scaleX = l/($('#zoom-s').width()-$('span').width());
var scaleY = t/($('#zoom-s').height()-$('span').height());
$('#zoom-b img').css('left',-scaleX*($('#zoom-b img').width() - $('#zoom-b').width()));
$('#zoom-b img').css('top',-scaleY*($('#zoom-b img').height() - $('#zoom-b').height()));
});
})
</script>
</body>
</html>

运行结果点击此链接
http://localhost:53315/index.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css 放大镜

相关文章推荐

新的分享

章节导航