- 浏览: 19308 次
文章分类
最新评论
js放大镜放大图片效果 详细出处参考:http://www.jb51.net/article/14335.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>脚本之家 js图片放大镜</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> 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; left:-32px; top:-32px; cursor: pointer; } #caption, #title{ color: #FFF; font-family: georgia, 'times new roman', times, veronica, serif; font-size: 1em; text-align: center; } #caption b { font-size: 2em; } </style> <script type="text/javascript"><!-- window.onerror = new Function("return true"); var obj = []; var scr; var spa; var img; var W; var Wi; var Hi; var wi; var hi; var Sx; var Sy; var M; var xm; var ym; var xb = 0; var yb = 0; var ob = - 1; var cl = false; /* needed in standard mode */ px = function(x) { return Math.round(x) + "px"; } /* center image - do not resize for perf. reason */ img_center = function(o) { with(img[o]) { style.left = px( - (width - Wi) / 2); style.top = px( - (height - Hi) / 2); } } ////////////////////////////////////////////////////////// var Nx = 4; //size grid x var Ny = 4; //size grid y var Tx = 3; // image width var Ty = 3; // image height var Mg = 40; // margin var SP = 1; // speed ////////////////////////////////////////////////////////// function Cobj(o, x, y) { this.o = o; this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2)))); this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2)))); this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP; this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP; this.l = 0; this.t = 0; this.w = 0; this.h = 0; this.s = 0; this.mv = false; this.spa = spa[o].style; this.img = img[o]; this.txt = img[o].alt; img[o].alt = ""; /* zooming loop */ this.zoom = function() { with(this) { l += li * s; t += ti * s; w += wi * s; h += hi * s; if ((s > 0 && w < Wi) || (s < 0 && w > Sx)) { /* force window.event */ window.focus(); /* loop */ setTimeout("obj[" + o + "].zoom()", 16); } else { /* finished */ mv = false; /* set final position */ if (s > 0) { l = ix * M + ix * Sx; t = iy * M + iy * Sy; w = Wi; h = Hi; } else { l = x * M + x * Sx; t = y * M + y * Sy; w = Sx; h = Sy; } } /* html animation */ with(spa) { left = px(l); top = px(t); width = px(w); height = px(h); zIndex = Math.round(w); } } } this.click = function() { with(this) { img_center(o); /* zooming logic */ if ( ! mv || cl) { if (s > 0) { if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4) { s = - 2; mv = true; zoom(); cap.innerHTML = txt; } } else { if (cl || ob != o) { if (ob >= 0) { with(obj[ob]) { s = - 2; mv = true; zoom(); } } ob = o; s = 1; xb = xm; yb = ym; mv = true; zoom(); cap.innerHTML = txt; } } } } } /* hook up events */ img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()"); img[o].onclick = new Function("cl=true;obj[" + o + "].click()"); img[o].onload = new Function("img_center(" + o + ")"); /* initial display */ this.zoom(); } /* mouse */ document.onmousemove = function(e) { if ( ! e) { e = window.event; } xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* init */ function load() { /* html elements */ scr = document.getElementById("screen"); spa = scr.getElementsByTagName("span"); img = scr.getElementsByTagName("img"); cap = document.getElementById("caption"); /* mouseover border */ document.getElementById("border").onmouseover = function() { cl = true; if(ob >= 0 && obj[ob].s > 0) obj[ob].click(); ob = -1; } /* global variables */ W = parseInt(scr.style.width); H = parseInt(scr.style.height); M = W / Mg; Sx = (W - (Nx - 1) * M) / Nx; Sy = (H - (Ny - 1) * M) / Ny; Wi = Tx * Sx + (Tx - 1) * M; Hi = Ty * Sy + (Ty - 1) * M; SP = M * Tx * SP; wi = (Wi - Sx) / SP; hi = (Hi - Sy) / SP; /* create objects */ for (k = 0, i = 0; i < Nx; i ++) { for (j = 0; j < Ny; j ++) { obj[k] = new Cobj(k ++, i, j); } } } //--> </script></head><body> <div style="position: absolute; left: 50%; top: 50%;"> <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div> <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div> <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192147592.jpg" alt=""></span> <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="/upload/20080504192148526.jpg" alt=""></span> <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192151907.jpg" alt=""></span> <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192153429.jpg" alt=""></span> <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154128.jpg" alt=""></span> <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154190.jpg" alt=""></span> <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192154345.jpg" alt=""></span> <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192155839.jpg" alt=""></span> <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192156858.jpg" alt=""></span> <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192156118.jpg" alt=""></span> <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192157749.jpg" alt=""></span> <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192158181.jpg" alt=""></span> <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192158115.jpg" alt=""></span> <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192159820.jpg" alt=""></span> <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192201596.jpg" alt=""></span> <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/20080504192201700.jpg" alt=""></span> </div> <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div> </div> <script type="text/javascript"><!-- // starter load(); //--> </script> </body></html> 详细出处参考:http://www.jb51.net/article/14335.htm 详细出处参考:http://www.jb51.net/article/14335.htm
相关推荐
charlesproxy(jb51.net).rar 压缩包包含 charles-proxy-4.2.7-win64.msi python3 环境搭建必备
叶子asp分页类内容来自:http://www.jb51.net/codes/8683.html
本地下载地址:64位:https://www.jb51.net/softs/416037.html 32位:https://www.jb51.net/softs/543679.html 1.2基础镜像Ubuntu16.04 DockerHub拉取 docker pull ubuntu:16.04 本地Ubuntu下载地址:...
安装TransMac 下载地址:https://www.jb51.net/softs/596307.html 安装Hasleo EasyUEFI 下载地址:https://www.jb51.net/softs/527101.html 安装DiskGenius 下载地址:https://www.jb51.net/softs/19980.html 系统...
JB/T 3752.1-1999 低压成套开关设备和控制设备产品型号编制方法 第1部分:低压成磁开关设备pdf,JB/T 3752.1-1999 低压成套开关设备和控制设备产品型号编制方法 第1部分:低压成磁开关设备
编程学习 1. Visual Studio Code - ...2. DCloud - HBuilder 快应 ...3. access软件网-access,acc http://www.accessoft.com/Index.asp ...原文链接:https://blog.csdn.net/qq_42838569/article/details/118628244
https://www.jb51.net/article/96898.htm mysql 5.6.21 安装与配置详细步骤 这篇文章主要介绍了mysql5.6.21安装与配置的详细步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 MySQL版本:5.6.21 下载地址...
Myeclipse 10 激活详解过程,Myeclipse 10 激活详解过程.pdf
JavaScript教程,帮你轻松学习。
学生信息录入系统 ... ... ... 4、本软件运行环境.net ...解决方法:参考https://www.jb51.net/article/59308.htm或https://blog.csdn.net/sat472291519/article/details/41007681。 8、数据库为access数据库,密码12345678。
可以破解myeclipse MyEclipse 各版本下载: http://www.softown.cn/soft/myeclipse MyEclipse 各版本破解教程: http://www.jb51.net/softs/150887.html
https://git.oschina.net/geek_qi/AG-Config.git: Authentication is required but no CredentialsProvider has been registered 这个错误可以不用理,主要是配置文件在git上无访问权限。不会影响使用,403错误,...
Json.NET中文文档完全解析,简而言之,这是一个可以用于.NET的Json辅助工具类。它可以将对对象序列化为json字符串,Newtonsoft.Json.JsonConvert类是非微软提供的...详细出处参考:http://www.jb51.net/article/30957.htm
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考,具体如下: ... img: 'http://huoche.7234.cn/images/jb51/abnprpojuhp.jpg' } let obj = Object.assign({}, resource, shareData) let p
在嵌入式web服务器boa框架的基础上, 使用C语言cgi, 或者Python脚本, 结合HTML + javascript + ajax 的嵌入式web系统的开发实例 ... boa服务器的相关配置参数说明: ...http://www.jb51.net/article/71940.htm
资源分类:Python库 所属语言:Python 资源全名:fxg2svg-0.2.2.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
本文实例讲述了javascript+...演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
同时打开多张图片并显示,图片的移动,缩放,旋转,渲染,截屏等功能,是一个H5制作的小软件
流水线语法的片段生成器可以选择...一步步说明了jacoco单测覆盖率的过程,值得一看:https://www.jb51.net/article/162875.htm 2020-02-20现在对单元测试以及测试覆盖率还是一团浆糊,对jacoco原理和使用还不了解 目