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

来源：互联网发布：淘宝的穿衣助手在哪编辑：程序博客网时间：2024/06/10 23:17

首先在这里我们创建一个空的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

阅读全文

0 0