文档章节

放大镜效果

ycYinG
 ycYinG
发布于 2016/12/08 16:07
字数 683
阅读 0
收藏 0
点赞 0
评论 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 ⋅ 3

iOS放大镜(带阴影)

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

云贵高原 ⋅ 2014/03/21 ⋅ 0

Silverlight 解谜游戏 之七 放大镜(3)

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

junwong ⋅ 2012/03/09 ⋅ 0

Silverlight 解谜游戏 之六 放大镜(2)

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

junwong ⋅ 2012/03/09 ⋅ 0

JQzoom.V2.3.1 图片放大镜升级版

jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大,使用简便。支持标准模式、反转模式、无镜头、无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果。 v2.3.1基于原版2.3修改...

迦楠 ⋅ 2012/04/15 ⋅ 9

基于Visual C++2010与windows7 sdk开发Windows7应用(3) 放大镜-方面视觉障碍用户

新的Windows 7放大镜是一个长期错过的工具,应已包括在以前的版本。随着大显示器变得越来越受欢迎,这样的工具成为必须拥有许多熟悉的用户。这也使得这样的介绍更加愉快的两个主持人和audie...

junwong ⋅ 2012/03/09 ⋅ 0

jQuery中的宽度和高度计算

DOM中宽度高度: window的宽度高度:代表着浏览器的有效可见区域的宽度高度,即浏览器工具栏和任务栏之间的区域,它会随着最大化最小化或改变窗口尺寸的变化而变化,它代表着“视界”。 docu...

i33 ⋅ 2013/03/25 ⋅ 0

jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果

演示下载地址:http://www.erdangjiade.com/js/1110.html Js代码 $(document).ready(function(){ / This code is executed on the document ready event / var left = 0, top = 0, sizes = {......

2当家的 ⋅ 2017/02/08 ⋅ 1

jQuery 图像缩放插件--evenZoom

evenZoom 是一个易于使用的 jQuery 插件,能够在图像内部创建一个放大镜效果。

大胖森 ⋅ 2015/05/11 ⋅ 0

8 款别具一格的 jQuery/HTML5 插件

这两年HTML5发展得越来越成熟,许多基于HTML5的应用也日益增多,jQuery又是前段开发利器,jQuery结合HTML5自然能够设计出非常棒的产品,本文介绍8款别具一格的jQuery/HTML5应用插件。 1、HTM...

yykj ⋅ 2013/11/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部