JavaScript 放大镜移动镜片效果代码

2024-09-27 15:02:21

放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果.
本次我们先了解如何在缩略图上移动镜片. (这是 DEMO)

缩略图和镜片组成的 DOM 结构如下.

代码如下:

我在缩略图容器中放置图片和镜片节点, 以缩略图容器作为相对位置参考, 在触发 mousemove 事件时修改镜片的位置. 换个说法, 我们要解决的问题是, 算出镜片左上角的在缩略图容器中的位置. 计算镜片位移的 JavaScript 代码如下.

代码如下:

/**
* 获取镜片在放大目标元素上的位置
* @param ev 触发的事件
* @param thumb 缩略图对象
* @param glass 镜片对象
* @return x:镜片在放大目标元素上的横向位置, y:镜片在放大目标元素上的纵向位置
*/
function getGlassOffset(ev, thumb, glass) {
var offset = {
left:0,
top:0
};

// 偏移量
var thumbOffset = getCumulativeOffset(thumb);
// 鼠标在页面上的位置
var mousePoint = getMousePoint(ev);
// 镜片实际尺寸
var glassSize = getSize(glass);
// 简缩图实际尺寸
var thumbSize = getSize(thumb);

// 光标横向位置
var cursorX = mousePoint.x - thumbOffset.left;
// 镜片横向偏移量
offset.left = cursorX - glassSize.width / 2;
if(offset.left < 0) {
offset.left = 0;
} else if(offset.left > thumbSize.width - glassSize.width) {
offset.left = thumbSize.width - glassSize.width;
}

// 光标纵向位置
var cursorY = mousePoint.y - thumbOffset.top;
// 镜片纵向偏移量
offset.top = cursorY - glassSize.height / 2;
if(offset.top < 0) {
offset.top = 0;
} else if(offset.top > thumbSize.height - glassSize.height) {
offset.top = thumbSize.height - glassSize.height;
}

return offset;
}

镜片左上角在缩略图容器中的位置 = 鼠标位置 - 缩略图左上角位置 - 镜片尺寸的一半
当镜片在容器外, 将镜片靠边. 全部代码请窥视 DEMO. (知道我为何上一篇写通过 JS 获取鼠标位置了吧?)

留个课后思考题, 当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?

js放大镜放大图片效果

我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持

qsoft.PopBigImage.v0.35.demo.rar 新特性: 1.不需要onload加载和指定id了,在img中加个标记就好,第一鼠标进入时动态生成显示层 2.可以随意调整,右边的展示层的大小了. qsoft.PopBigImage version:0.35 author: kimmking@163.com date: 2009年3月26日 15:20:50 功能描述: 一般页面的的图片为了布局考虑,显示大小都小于实际大小. 鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的
JavaScript 放大镜放大倍率和视窗尺寸

对JavaScript 放大镜来说, 计算倍率必不可少. 一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系. 倍率 = 原图/缩略图 = 视窗/镜片倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1. 因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率. 复制代码代码如下: /** * 获取放大镜放大倍数 *
用js实现放大镜的效果的简单实例

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
原生js写的放大镜效果

我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me
用JS实现购物网站商品放大镜效果

放大镜效果就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{margin:0;padding: 0;} #warp{widt
使用纯javascript实现放大镜效果

jd或者淘宝的具体商品有个放大镜的效果.虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let'go: 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧: 最终实现效果: html 代码: 复制代码代码如下: <div id="Magnifier"></div> css 代码: 复制代码代码如下: <style> * { mar
JavaScript 放大镜移动镜片效果代码

放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果. 本次我们先了解如何在缩略图上移动镜片. (这是 DEMO) 缩略图和镜片组成的 DOM 结构如下. 复制代码代码如下: <a id="thumb" href="#"> <img src="http://img.alibaba
javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)

实例代码一见: 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #main div{position:absolute;width:220px;height:150px;border:1px solid #999;} </style> <script type="text/javascript"> var a; d
javascript布局查看器效果代码

body{ margin:0 auto; width:950px; font-size:12px; text-align:center; } #wholebody{ width:950px; } .newline{/*仅应用于右侧*/ clear:both; width:700px; } #top{ height:auto; } .left_square{ } .right_square{ } #topic{ height:100px; } #left{ float:left; width:25
javascript图片渐显效果代码

在<head>到</head>之间插入如下的JAVASCRIPT代码: nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade
javascript模仿msgbox提示效果代码

复制代码代码如下: //前任作者:http://www.moozi.net //修改:hh13774978@126.com,rayking function $(str){ return document.getElementById(str); } function _(str){ return document.getElementsByTagName(str); } function msg(boxtitle,boxtype,boxwidth,msg,url){
javascript模拟的Ping效果代码（Web Ping）

当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21) 在线演示:http://demo.jb51.net/js/2011/ping/ 核心代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
javascript 无限联动菜单效果代码

Selects *{font-size:14px;} select{height:20px;font-size:12px;} 2级联动 3级联动 4级联动 5级联动 var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([
javascript移动的盒子效果代码

移动的盒子练习 *{padding:0;margin:0;} function $(obj){ return document.getElementById(obj); } //事件绑定通用方法 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn);
JS文字球状放大效果代码分享

很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no

JavaScript 放大镜 移动镜片效果代码

相关推荐

随机推荐

JavaScript 放大镜移动镜片效果代码