Dreamweaver怎么做出当鼠标移到图片上面的时候图片变大这种效果
麻烦各位大侠请的详细点我是个新手.麻烦用中告诉我用具体的步骤.最好是用中文告诉我下是什么意思.在此先感谢各位来回我的所提出的问题...
麻烦各位大侠请的详细点我是个新手.
麻烦用中告诉我用具体的步骤.最好是用中文告诉我下是什么意思.在此先感谢各位来回我的所提出的问题 展开
麻烦用中告诉我用具体的步骤.最好是用中文告诉我下是什么意思.在此先感谢各位来回我的所提出的问题 展开
6个回答
展开全部
看看我的效果吧
你看你的相对路径对不对。有个地方错了
<img id=MainImg onmouseover=max() onmouseout=min() src="你的图片地址" width="放大后的宽度" height="放大后的高度"></a>
把</a>去掉，width 和height 是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min() src="你的图片地址" width="放大后的宽度" height="放大后的高度"></a>
<script>
var i=0
//变大
function max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
你看你的相对路径对不对。有个地方错了
<img id=MainImg onmouseover=max() onmouseout=min() src="你的图片地址" width="放大后的宽度" height="放大后的高度"></a>
把</a>去掉，width 和height 是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min() src="你的图片地址" width="放大后的宽度" height="放大后的高度"></a>
<script>
var i=0
//变大
function max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
2009.11.22
<!--
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
<a href="" onClick="return false"><img name="small" border="0" src="img/aa.gif" width="101" height="95" onClick="MM_showHideLayers('layer2','','show');MM_showHideLayers('layer','','hide');MM_showHideLayers('layer1','','hide');"></a>
<div id="layer2" style="position: absolute; left: 362px; top: 14px; width: 342px; height: 189px; z-index: 1; visibility: hidden">
<table border="0" width="350" height="216" cellspacing="0" cellpadding="0">
<tr bordercolor="#FFFFFF">
<td width="624" valign="top" align="left">
<div align="center">
<center>
<table border="0" width="50%" height="181" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" height="151" valign="top" align="center"><a href="" onclick="return false" ><img src="img/aa.gif" name="big" width="256" height="211" border="0" onclick="MM_showHideLayers('layer2','','hide');MM_showHideLayers('layer','','show');MM_showHideLayers('layer1','','show');return false;"></a> </td>
</tr>
<tr>
<td width="100%" height="12" valign="top" align="center"> </td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</div>
<!--
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
<a href="" onClick="return false"><img name="small" border="0" src="img/aa.gif" width="101" height="95" onClick="MM_showHideLayers('layer2','','show');MM_showHideLayers('layer','','hide');MM_showHideLayers('layer1','','hide');"></a>
<div id="layer2" style="position: absolute; left: 362px; top: 14px; width: 342px; height: 189px; z-index: 1; visibility: hidden">
<table border="0" width="350" height="216" cellspacing="0" cellpadding="0">
<tr bordercolor="#FFFFFF">
<td width="624" valign="top" align="left">
<div align="center">
<center>
<table border="0" width="50%" height="181" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" height="151" valign="top" align="center"><a href="" onclick="return false" ><img src="img/aa.gif" name="big" width="256" height="211" border="0" onclick="MM_showHideLayers('layer2','','hide');MM_showHideLayers('layer','','show');MM_showHideLayers('layer1','','show');return false;"></a> </td>
</tr>
<tr>
<td width="100%" height="12" valign="top" align="center"> </td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看看我的效果吧
你看你的相对路径对不对。有个地方错了
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
把</a>去掉，width
和height
是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>
鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
<script>
var
i=0
//变大
function
max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function
min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function
init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
你看你的相对路径对不对。有个地方错了
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
把</a>去掉，width
和height
是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>
鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
<script>
var
i=0
//变大
function
max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function
min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function
init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看看我的效果吧
你看你的相对路径对不对。有个地方错了
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
把</a>去掉，width
和height
是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>
鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
<script>
var
i=0
//变大
function
max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function
min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function
init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
你看你的相对路径对不对。有个地方错了
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
把</a>去掉，width
和height
是图片的原始大小，不是放大后的，放大是由if(i<20)setTimeout('max()',100)这里控制的，你把20改为其他数字看看效果，比如100。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>
鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img
id=MainImg
onmouseover=max()
onmouseout=min()
src="你的图片地址"
width="放大后的宽度"
height="放大后的高度"></a>
<script>
var
i=0
//变大
function
max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function
min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function
init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=110
MainImg.style.pixelHeight=110
}
onload=init
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要调用伪类··举个简单的例子
你主要的是要放大的效果，就是那个a:hover标记起的作用
主要你把鼠标移动到上面，它的像素就改成80px，所以放大了
其他几个就是颜色的改变，一个访问之前的颜色，一个点击时颜色，一个点击之后的颜色，你可以去试下
<html>
<head>
<style>
a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
font-size:80px;
}
a:active{
color:blue;
}
</style>
</head>
<body>
<caption><a href="">今天火箭输了</a></caption>
</body>
</html>
你主要的是要放大的效果，就是那个a:hover标记起的作用
主要你把鼠标移动到上面，它的像素就改成80px，所以放大了
其他几个就是颜色的改变，一个访问之前的颜色，一个点击时颜色，一个点击之后的颜色，你可以去试下
<html>
<head>
<style>
a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
font-size:80px;
}
a:active{
color:blue;
}
</style>
</head>
<body>
<caption><a href="">今天火箭输了</a></caption>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
