文档章节

放大镜效果

ycYinG
 ycYinG
发布于 2016/12/08 16:07
字数 683
阅读 1
收藏 0

###普及知识:放大镜特效涉及到的几个值

offsetWidth    获取元素的宽度
offsetHeight  获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop  内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove  鼠标移动事件
onmouseover  鼠标划过事件

###主要思路: 1.鼠标移动,阴影区跟着移动 2.鼠标移动,大图也跟着移动 3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的 4.保证阴影区域以及大div.big在鼠标移动到div.small时显示 ###html实现 <div id="fangdajing"> <div class="small"> <img src="small.jpg" alt=""> <div class="shadow"></div> </div> <div class="big"> <img src="big.jpg" alt=""> </div> </div> ###css样式 //定位,大图显示区域和阴影区域最开始不显示 #fangdajing{ width:450px; height:450px; position:relative; } .small{ width:450px; height:450px; position:absolute; left:0px; top:0px; } .shadow{ width:200px; height:200px; background:yellow; opacity:0.3; position:absolute; top:0; left:0; display:none; } .big{ position:absolute; left:450px; width:356px; height:356px; overflow:hidden; display:none; } ###js实现
#####1.获取对象 var fdj = document.getElementById('fangdajing'); var big = document.getElementsByClassName('big')[0]; var small = document.getElementsByClassName('small')[0]; var shadow = document.getElementsByClassName('shadow')[0]; #####2.鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域 small.onmouseover = function(){ big.style.display = 'block'; shadow.style.display = 'block'; } #####3. #####(1)鼠标移动,div.shadow跟着移动,先获取到shadow在small内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及shadow的宽高,让鼠标划过的位置一直位于shadow区域的中心点,所以可得shadow在small内的相对位置,之后进行判断,让shadow不能出边界,最后进行赋值操作 #####(2)shadow区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和shadow的比例为big.offsetWidth/shadow.offsetWidth,以shadow的左上角为准,大图的滚动距离为left*相应比例
small.onmousemove = function(ent){ var e = ent || event; //获取鼠标事件对象 var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //获取shadow在small内的相对位置 var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2; var tw = fdj.offsetWidth - shadow.offsetWidth; //获取shadow最大可移动距离 var th = fdj.offsetHeight - shadow.offsetHeight;
//对shadow进行限制 if(left < 0){ left = 0;
}else if(left > tw){ left = tw; } if(top < 0){ top = 0;
}else if(top > th){ top = th; }
//赋值 small.style.left = left + 'px'; small.style.top = top + 'px';
//大图跟着移动 var sl = left * big.offsetWidth / shadow.offsetWidth; var st = top * big.offsetHeight / shadow.offsetHeight; big.scrollTop = st; big.scrollLeft = sl;
} #####4.鼠标移出,大图以及shadow隐藏 small.onmouserout = function(){ big.style.display = 'none'; shadow.style.display = 'none';
}

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
帮助你生成放大镜效果的jQuery插件 - Melens

日期:2012-12-1 来源:GBin1.com 在线演示 本地下载 大家肯定在以前gbin1发布的文章中看到过帮助你生成图片“放大镜”效果的插件,今天这里我们再介绍一款jQuery插件 - Melens。如果大家需要...

gbin1
2012/12/03
313
3
iOS放大镜(带阴影)

一个具有立体阴影的通用放大镜视图,可对手指触摸位置处局部放大,效果与iOS自身的文本编辑框放大镜相同。支持自动避让,以动画效果跳转。 功能特性: 圆形放大镜,右下角带阴影(区别于另一...

云贵高原
2014/03/21
902
0
Silverlight 解谜游戏 之七 放大镜(3)

在前两篇文章中,我们已经创建了“放大镜效果”和“放大镜CheckBox”,本篇内容将通过CheckBox来控制放大镜效果的开/关状态,并完成全部“放大镜”功能。在进行本篇内容前请确保您已经阅读过...

junwong
2012/03/09
142
0
Silverlight 解谜游戏 之六 放大镜(2)

北京50年罕见暴雪,一会4点就下班了,赶在下班前再发一篇吧。上一篇我们已经添加了MagnifierOverBehavior 放大镜功能,但仍然无法控制该放大镜的开/关状态,本篇将基于一张放大镜图片创建一个...

junwong
2012/03/09
93
0
canvas离屏技术与放大镜实现

教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)canvas 离屏技术与放大镜实现。 更多讨论或者错误提交,也请移步。 利用除了可以实现滤镜,还可以利用离屏技术放大...

godbmw
08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

2018年终盘点:区块链真的结束了吗?

2018 年,大家依旧期待区块链出现“杀手级”应用,然而到了年关,终究还是没有。既然没有出现,只能认为“神功”尚未练成,但是这一年也没有虚度,让大家再一次领教了这个领域的跌宕起伏。 ...

酒逢知己千杯少
3分钟前
0
0
社交软件系统ThinkSNS+默认配置信息说明

感谢大家一直以来对社交软件系统ThinkSNS的关注,ThinkSNS Plus社交系统一直在不断优化完善。ThinkSNS Plus 本次于2018年12月3日更新发布。 本次重要更新说明如下: 1.优化默认配置信息,服务...

ThinkSNS账号
5分钟前
0
0
阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量

2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支...

阿里云官方博客
7分钟前
0
0
Frost & Sullivan权威报告:阿里云再次领跑云WAF大中华区市场

近日,国际权威分析机构Frost & Sullivan 针对Web应用防火墙(简称“WAF”)领域发布了《2017年亚太区Web应用防火墙市场报告》,阿里云以市场占有率45.8%的绝对优势连续两年领跑大中华区云WAF...

阿里云云栖社区
7分钟前
0
0
Axios使用拦截器全局处理请求重试

Axios拦截器 Axios提供了拦截器的接口,让我们能够全局处理请求和响应。Axios拦截器会在Promise的then和catch调用前拦截到。 请求拦截示例 axios.interceptors.request.use(function (conf...

kisshua
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部