heisalittlebird
- 浏览: 19434 次
-
文章分类
最新评论
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
分享到：
发表评论
相关推荐
24考研大纲即将发布 链接：https://pan.baidu.com/s/1uDgTJnJca8p79_vCnzXHFA 提取码：bnpq
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教程,帮你轻松学习。
可以破解myeclipse MyEclipse 各版本下载： http://www.softown.cn/soft/myeclipse MyEclipse 各版本破解教程： http://www.jb51.net/softs/150887.html
学生信息录入系统 ... ... ... 4、本软件运行环境.net ...解决方法:参考https://www.jb51.net/article/59308.htm或https://blog.csdn.net/sat472291519/article/details/41007681。 8、数据库为access数据库，密码12345678。
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制作的小软件