图片展示效果鼠标经过变大图，支持FF

2023-04-12 原文

rc="https://www.jb51.net/upload/20090821121047257.gif" border="0">

<title>5</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">HTML { OVERFLOW: hidden } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 815px; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 230px } #box { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #111; VISIBILITY: hidden; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; POSITION: absolute } #screen { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #000; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 815px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; HEIGHT: 230px } #box IMG { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; POSITION: absolute } #box SPAN { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 200px; COLOR: #fff; FONT-FAMILY: verdana; POSITION: absolute } #box A { FONT-SIZE: 12px; COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover { BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #box A:visited { COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover:visited { BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #lnk { VISIBILITY: hidden } </style>
<script type="text/javascript"> document.onselectstart = new Function("return false"); O = new Array(); box = 0; img = 0; txt = 0; tit = 0; W = 0; H = 0; nI = 0; sel = 0; si = 0; ZOOM = 0; rImg = 0; ////////////////// speed = .06; // animation speed delay = .5; // 1 = no delay ////////////////// function dText(){ txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right"; txt.innerHTML = O[sel].tx; tit.innerHTML = O[sel].ti; } function CObj(n, s, x, tx, ti){ this.n = n; this.dim = s; this.tx = tx; this.ti = ti; this.is = img[n]; this.vz = 0; this.sx = 0; this.x0 = x; this.x1 = 0; this.zo = 0; this.over = function() { with(this){ if(n!=sel){ O[sel].dim = 250; O[n].dim = ZOOM * 100; sel = n; l = 0; for(k=0; k<nI; k  ){ O[k].x0 = l; l  = O[k].dim; } txt.innerHTML = tit.innerHTML = ""; setTimeout("dText()", 32); } } } this.anim = function () { with(this){ vz = speed*(vz (x1-sx)*delay); x1 -= vz; sx = (n==0)?0:O[n-1].x0 O[n-1].dim; zo -= (zo-dim)*speed; l = (x1*si) 6*(n 1); w = zo*si; is.style.left = Math.round(l) 'px'; is.style.top = Math.round((H-w*rImg)*.5) 'px'; is.style.width = Math.round(w) 'px'; is.style.height = Math.round(w*rImg) 'px'; if(sel == n){ if(sel<nI*.5) { tit.style.left = txt.style.left = Math.round(l w 6) 'px'; } else { tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6) 'px'; } txt.style.top = Math.round(-(w*rImg)*.25) 'px'; tit.style.top = Math.round((w*rImg)*.33) 'px'; } } } } function run(){ for(j in O)O[j].anim(); setTimeout("run()", 16); } function doResize(){ tit.style.width = Math.round(nx*.25) 'px'; txt.style.width = Math.round(nx*.25) 'px'; tit.style.fontSize = (nx/30) 'px'; txt.style.fontSize = (nx/70) 'px'; with(box.style){ width = Math.round(W) 'px'; height = Math.round(H) 'px'; left = Math.round(nx/2-W/2) 'px'; top = Math.round(ny/2-H/2) 'px'; } } function resize(){ nx = scr.offsetWidth; ny = scr.offsetHeight; W = nx*90/100; si = (W-((nI 1)*6))/((ZOOM*180) ((nI-1)*180)); H = (100*si*rImg) 14; doResize(); } onresize = resize; onload = function(){ scr = document.getElementById("screen"); box = document.getElementById("box"); tit = document.getElementById("tit"); txt = document.getElementById("txt"); img = box.getElementsByTagName("img"); Lnk = document.getElementById("lnk").getElementsByTagName("a"); nI = img.length; ZOOM = nI; rImg = img[0].height/img[0].width; resize(); s = ZOOM * 100; x = 0; tit.innerHTML = img[0].title; txt.innerHTML = img[0].alt; for(i=0; i<nI; i  ) { var t = img[i].alt; if(Lnk[i].href!="") t ='<br>' Lnk[i].innerHTML ''; O[i] = new CObj(i, s, x, t, img[i].title); img[i].alt = ""; img[i].title = ""; img[i].onmousedown = new Function("return false;"); img[i].onmouseover = new Function('O[' i '].over();'); if(Lnk[i].href!=""){ /* ==== hyperlink ==== */ img[i].onclick = new Function('window.open("' Lnk[i].href '","_blank");'); } x  = s; s = 250; } box.style.visibility = "visible"; run(); } </script><meta content="MSHTML 6.00.6000.20815" name="GENERATOR">
<div id="screen"> <div id="box">
<img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><img title="" alt="" src="https://resources.devmax.cn/uploads/20230412/7a7df7fc5b4c7a50f922baa216e4e13f.jpg"><span id="txt" style="FONT-SIZE: 14px"></span><span id="tit"></span><span id="lnk"></span>
</div>
</div>
<span id="LB0" style="LEFT: 50%; POSITION: absolute; TOP: 50%"><span style="FONT-SIZE: 10px; LEFT: -120px; COLOR: #ffffff; FONT-FAMILY: arial; POSITION: absolute; TOP: 8px">Loading...</span> <span style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -120px; WIDTH: 100px; POSITION: absolute; TOP: 20px; HEIGHT: 10px"><span id="LB1" style="FONT-SIZE: 1px; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 10px"></span></span></span> <script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i  )m02 =(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100) 'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>

图片展示效果鼠标经过变大图，支持FF的更多相关文章

jQuery实现鼠标经过购物车出现下拉框代码(推荐)

在做web前端项目开发的时候，使用jquery库的感触颇多，下面小编通过写购物车的下拉框做法，把我的想法给大家分享一下，感兴趣的朋友可以参考下
JavaScript实现鼠标经过表格某行时此行变色

这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格某行时此行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现鼠标经过像翻页和描点链接效果

这篇文章主要介绍了jQuery实现鼠标经过像翻页和描点链接效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
利用iOS实现系统相册大图浏览功能详解

查看大图是们日常开发中经常会遇到的一个需求，下面这篇文章主要给大家介绍了关于利用iOS实现系统相册大图浏览功能的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
IOS 开发之查看大图的实现代码

这篇文章主要介绍了IOS 开发之查看大图的实现代码的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
基于JS实现点击图片在弹出层显示大图效果

Javascript是个好东西。Jquery是基于这个好东西的一个强大的库。本文将利用JavaScript实现点击图片在弹出层显示大图功能，感兴趣的可以了解一下
jQuery实现点击查看大图并以弹框的形式居中

这篇文章主要介绍了jQuery实现点击查看大图并以弹框的形式居中的代码，代码简单易懂，需要的朋友参考下
图片展示效果鼠标经过变大图，支持FF

图片展示效果，鼠标经过变大图，支持FF 类似FLASH一样漂亮
vue实现鼠标经过显示悬浮框效果

这篇文章主要为大家详细介绍了vue实现鼠标经过显示悬浮框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
iOS点击查看大图的动画效果

这篇文章主要为大家详细介绍了iOS点击查看大图的动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

图片展示效果 鼠标经过变大图，支持FF

随机推荐

图片展示效果鼠标经过变大图，支持FF