这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
非常漂亮的 js 放大镜效果代码,对于浏览图片效果应该不错哦
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html><head><title>phperz 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>
- <div></div>
- <div></div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_2/1490193621_5621.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490193623_9145.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_7/1490193624_6126.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_20/1490193625_8613.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_17/1490193626_9147.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_9/1490193628_3524.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_4/1490193629_9495.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_17/1490193630_3735.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_2/1490193631_4812.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_15/1490193633_1024.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490193634_5000.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_19/1490193635_6443.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_5/1490193636_8002.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_19/1490193637_1489.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_11/1490193639_6922.jpg" data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490193640_6227.jpg" data-src="">
- </div>
- <div><b>carefully</b> weight the options</div>
- </div>
- <script type="text/javascript"><!--
- // starter
- load();
- //-->
- </script>
- </body></html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0629/288263.html