Question

HTML问题

请问html中如何设置”当鼠标经过图片时图片浮出”？





Answer 1

有两种方式

1. 通过JS：监听图片的mouseover事件，然后通过JS修改图片的大小/位置一类的信息达到浮出的效果。优点是浏览器的兼容性比较好，缺点是，性能开销会有点大。

2. 通过CSS：图片的css上加一句transition: all 100ms;然后再加一个图片hover的css，设置好位置/大小一类的信息达到浮出的效果。这样做的好处是，性能比较好，缺点是兼容性很差

个人的建议是，如果可以不考虑浏览器兼容性问题，或者在移动端运行，就优先使用CSS的方案。如果是PC上运行，要考虑IE7/8/9的，那还是用JS的方案

Answer 2

js 控制的 经过的时候 设置图片的宽高

Answer 3

<script language="JavaScript">
<!--
function FP_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; }
}
function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
<p>
<img border="0" src="插入底图片" width="200" height="200" onmouseout="FP_changePropRestore()" onmousemove="FP_changeProp(/*id*/'layer2',1,'style.visibility','visible')"></p>
<div style="position: absolute; width: 207px; height: 192px; z-index: 1; left: 10px; top: 6px; visibility: hidden" id="layer2">
<span>插入层图片</span></div>

追问

请问这个层图片指的是什么？div吗！

追答

是的，div层中插入

追问

没有这个效果吖