web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
图片特效
jquery放大镜特效
分类:
图片特效
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
#### html ```html $(document).ready(function(){ // 定义图像的实际尺寸、 var native_width = 0; var native_height = 0; // 首先、我们应该获得图像的实际尺寸、(本地的图片) $('.small').load(function(){ // 这里我们需要重新创建一个和之前相同的图像对象、 // 因为我们不能直接获得图像尺寸的宽高、 // 因为我们在HTML里已经指定了图片宽度为200px、 var img_obj = new Image(); img_obj.src = $(this).attr('src'); // 在这里这段代码写在这里是非常有必要的、 // 如果在图像加载之前就访问的话、return的宽高值为0、 native_width = img_obj.width; native_height = img_obj.height; // 现在、我来开始写鼠标移动的函数、mousemove() $('.magnify').mousemove(function(e){ // 获得鼠标X轴和Y轴的坐标 // 先获得magnify相对与document的定位position var magnify_offset = $(this).offset(); // 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置 var mouse_x = e.pageX - magnify_offset.left; var mouse_y = e.pageY - magnify_offset.top; // 现在、我们来调整一下放大镜的隐藏与显示、 if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){ $('.large').fadeIn(100); }else{ $('.large').fadeOut(100); } if($('.large').is(':visible')){ // 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、 // 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、 /* var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例 var large_x = ratio_x*native_width; // 我们需要让它在放大镜的中间位置显示、 large_x = large_x - $('.large').width()/2; // 因为背景图片的定位、这里需要转化为负值、 large_x = large_x*-1; // 现在我们来整合一下所有的计算步骤、 */ var rx = Math.round(mouse_x/$('.small').width()*native_width - $('.large').width()/2)*-1; var ry = Math.round(mouse_y/$('.small').height()*native_height - $('.large').height()/2)*-1; var bgp = rx + 'px ' + ry + 'px'; // 现在我们应该来写放大镜跟随鼠标的效果、 // 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、 // 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标 var gx = mouse_x - $('.large').width()/2; var gy = mouse_y - $('.large').height()/2; $('.large').css({ 'left':gx, 'top':gy, 'backgroundPosition':bgp }) } }) }) // 最后、我们来把这个mousemove()这个函数来放在这个load这个函数里 }) ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告