用JS实现放大镜特效_技术问答

首页免费课用JS实现放大镜特效问答

用JS实现放大镜特效

                
                姜维
            Web前端工程师

                    查看讲师更多课程 
                    姜维讲师的其他课程
                
jQuery插件——Validation Plugin
中级·65863
免费课程
                                
jQM Web App –列车时刻表
中级·38481
免费课程
                                
基于bootstrap的网页开发
中级·187643
免费课程
                                
WEB调试工具---Firebug
初级·77646
免费课程
                                
网页定位导航特效
初级·71389
免费课程
                                
                难度初级
            
                时长31分
            
                学习人数
            
综合评分9.67
                            110人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.6
                                逻辑清晰

全部评论问答未解决精华

前端界的小学生

请那些小白看好了难度，中级，眼睛瞪大了，然后在bb。不能因为你，耽误大家的时间，谢谢

0 4-1 用JS放大镜特效实现

2016-08-30

冷眼看尽繁华丿

那个说老师图片比例写死的，你是有多脑残，offsetWidth 是干嘛的？

0 4-1 用JS放大镜特效实现

2016-08-25

天神无所不能

写代码时候的音乐好吵~尤其我现在还感冒了

0 3-1 放大镜特效设计

2016-08-19

遇见1993寒冬湖上的白云

音乐有干扰啊！都听音乐去了

0 1-1 JS放大镜特效简介

2016-08-13

精慕门3048457

最开始以为是取左边的图片显示在右边的图上面，还在想怎么取。看到这知道是右边本来就有一张图片，这样子就简单多了。

0 2-1 原理分析

2016-08-12

微积分2016

$("#mark").hover(function () {
// 显示浮层和大图片
$("#float-box").show();
$("#big-box").show();
},function () {
// 隐藏浮层和大图片
$("#float-box").hide();
$("#big-box").hide();
});

1 6-1 编程挑战

2016-08-04

微积分2016

// 越界处理
pos.left=pos.left<smBoxLeft?smBoxLeft:(pos.left>smBoxLeft+smBoxW-floatBoxW?smBoxLeft+smBoxW-floatBoxW:pos.left);
pos.top=pos.top<smBoxTop?smBoxTop:(pos.top>smBoxTop+smBoxH-floatBoxH?smBoxTop+smBoxH-floatBoxH:pos.top);

$float_box.offset(pos);

1 6-1 编程挑战

2016-08-04

微积分2016

// 显示大图
var smX=pos.left-smBoxLeft;
var smY=pos.top-smBoxTop;
var bigX=-(smX*$big_box.width()/floatBoxW);
var bigY=-(smY*$big_box.height()/floatBoxH);
var bigPos={
X:Math.floor(bigX),
Y:Math.floor(bigY)
};
$("#big-box img").eq(0).css({"top":bigPos.Y+"px","left":bigPos.X+"px"});

1 6-1 编程挑战

2016-08-04

微积分2016

$(ele).offset().top;
$(ele).offset().left;
$(ele).offset({top:"100",left:"100"})
$(ele).position()

1 6-1 编程挑战

2016-08-04

微积分2016

真希望不要使用IE

1 5-1 解决兼容性问题

2016-08-04

微积分2016

// 大图片运动
var moveX=left;
var moveY=top;
var moveBX=-Math.floor((left*objBigBox.offsetWidth/objFloatBox.offsetWidth));
var moveBY=-Math.floor((top*objBigBox.offsetHeight/objFloatBox.offsetHeight));
objBigBoxImage.style.left=moveBX+"px";
objBigBoxImage.style.top=moveBY+"px";

2 4-3 编程练习

2016-08-04

微积分2016

// 防止越界
left=left<0?0:(left>(objSmallBox.offsetWidth-objFloatBox.offsetWidth)?(objSmallBox.offsetWidth-objFloatBox.offsetWidth):left);
top=top<0?0:(top>(objSmallBox.offsetHeight-objFloatBox.offsetHeight)?(objSmallBox.offsetHeight-objFloatBox.offsetHeight):top);

4 4-3 编程练习

2016-08-04