CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

鼠标经过图片放大 flash鼠标经过放大 鼠标放上去图片放大 鼠标放大

<p>tags:鼠标经过图片放大 flash鼠标经过放大 鼠标放上去图片放大 鼠标放大 鼠标放大镜 放大镜 鼠标指针 鼠标 qq空间鼠标效果 鼠标效果 鼠标跟随效果</p> <p> <FCK:meta content="no" http-equiv="imagetoolbar" /><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></p> <p> </p> <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> <div style="left: 50%; position: absolute; top: 50%"> <div id="title" style="left: -220px; width: 440px; position: absolute; top: -200px; height: 40px"> </div> <div id="border" style="border-right: rgb(85,85,85) 1px solid; border-top: rgb(85,85,85) 1px solid; background: rgb(0,0,0) 0% 50%; left: -220px; border-left: rgb(85,85,85) 1px solid; width: 440px; border-bottom: rgb(85,85,85) 1px solid; position: absolute; top: -170px; height: 340px; 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) 0% 50%; left: -200px; width: 400px; position: absolute; top: -150px; height: 300px; moz-background-clip: -moz-initial; moz-background-origin: -moz-initial; moz-background-inline-policy: -moz-initial"><span style="z-index: 93; left: 0px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -8px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" /></span> <span style="z-index: 93; left: 0px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" /></span> <span style="z-index: 93; left: 103px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" /></span> <span style="z-index: 93; left: 205px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 0px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 78px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 155px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" /></span> <span style="z-index: 93; left: 308px; width: 93px; top: 233px; height: 68px"><img style="left: -11px; top: -9px" alt="" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" /></span></div> <div id="caption" style="left: -220px; width: 440px; position: absolute; top: 175px; height: 60px"><strong>carefully</strong> weight the options</div> </div> <script type="text/javascript"><!-- // starter load(); //--> </script>

运行代码复制代码另存代码收藏本页 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

来源css中国 www.csschina.net