红枫 发表于 2021-8-27 14:50

代码音画：《中国山水画》----鼠标滑过放大图片

<DIV style="POSITION: relative; WIDTH: 800px; HEIGHT:850px;TOP: 00px; LEFT: -200px">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#apDiv1 {
        position:absolute;
        width:1000px;
        height:450px;
        z-index:1;
        left: 80px;
        top: 80px;
}




#apDiv2 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:1;
        left: 20px;
        top: 690px;
}
#apDiv3 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:1;
        left: 145px;
        top: 690px;
}
#apDiv4 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:1;
        left: 270px;
        top: 690px;
}
#apDiv5 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:1;
        left: 395px;
        top: 690px;
}
#apDiv6 {        position:absolute;
        width:70px;
        height:30px;
        z-index:1;
        left: 520px;
        top: 690px;
}
#apDiv7 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:2;
        left: 645px;
        top: 690px;
}
#apDiv8 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:2;
        left: 770px;
        top: 690px;
}
#apDiv9 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:3;
        left: 895px;
        top: 690px;
}

#apDiv10 {
        position:absolute;
        width:70px;
        height:30px;
        z-index:3;
        left: 1020px;
        top: 690px;
}


</style>





<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p.src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}




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.document; n=n.substring(0,p);}
if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}










function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a))!=null){document.MM_sr=x; if(!x.oSrc) x.oSrc=x.src; x.src=a;}
}

function MM_popupMsg(msg) { //v1.0
alert(msg);
}
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
</script>

</head>

<body onload="MM_preloadImages
('c/010.jpg','c/08.jpg','c/07.jpg','c/06.jpg'c/05.jpg','c/04.jpg','c/03.jpg','c/02.jpg','c/01.jpg')">

<div style="left: 0px;
        top: 0px;"><img src="https://z3.ax1x.com/2021/08/27/hMNsYj.png" width=1650 height=850></div>


<div id="apDiv1" onmousedown="MM_changeProp('apDiv1','','top','width=400 height=175','DIV')">
<img src="https://z3.ax1x.com/2021/08/27/hMUM3n.jpg" name="huan1" width="1000" height="550" id="huan1" onmousemove="MM_changeProp('huan1','','width','400','IMG');MM_changeProp('huan1','','height','150','IMG')" onmouseout="MM_changeProp('huan1','','width','1000','IMG');MM_changeProp('huan1','','height','550','IMG')" />


</div>



<div id="apDiv2"><img src="https://z3.ax1x.com/2021/08/27/hMd26I.jpg" name="d01" width="116" height="53" id="d01" onmouseover="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUtN4.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>




<div id="apDiv3">
<img src="https://z3.ax1x.com/2021/08/27/hMdfnP.jpg" alt="" name="d02" width="116" height="53" id="d02" onmouseover="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUDu6.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>

<div id="apDiv4">
<img src="https://z3.ax1x.com/2021/08/27/hMdRXt.jpg" alt="" name="d03" width="116" height="53" id="d03" onmouseover="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMU0jx.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>

<div id="apDiv5">
<img src="https://z3.ax1x.com/2021/08/27/hMdcpd.jpg" alt="" name="d04" width="116" height="53" id="d04" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUwg1.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>


<div id="apDiv6">
<img src="https://z3.ax1x.com/2021/08/27/hMdh0f.jpg" alt="" name="d04" width="116" height="53" id="d05" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUd3R.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>


<div id="apDiv7">
<img src="https://z3.ax1x.com/2021/08/27/hMd478.jpg" alt="" name="d04" width="116" height="53" id="d06" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUYEF.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>



<div id="apDiv8">
<img src="https://z3.ax1x.com/2021/08/27/hMdIAS.jpg" alt="" name="d04" width="116" height="53" id="d07" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUGHU.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>


<div id="apDiv9">
<img src="https://z3.ax1x.com/2021/08/27/hMdotg.jpg" alt="" name="d04" width="116" height="53" id="d08" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUN4J.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>


<div id="apDiv10">
<img src="https://z3.ax1x.com/2021/08/27/hMdg1A.jpg" alt="" name="d04" width="116" height="53" id="d09" onmousemove="MM_swapImage('huan1','','https://z3.ax1x.com/2021/08/27/hMUaC9.jpg',1)" onmouseout="MM_swapImgRestore()" /></div>



<audio src="http://music.163.com/song/media/outer/url?id=105863.mp3" loop="loop"autoplay="autoplay" type="audio/mp3"></audio>


</body>



</html>



</DIV>
<BR><BR><BR><BR><BR>

红枫 发表于 2021-8-27 15:13

下面的可能是最简的图片放大代码了：



<img src="https://z3.ax1x.com/2021/08/04/fA0Iv6.gif" id="img_1"onmouseover= "letBig(this)"onmouseout= "letsmall(this)" style="width:100px;height:100px;margin-top:50px;margin-left:300px;" />

<script>

function letBig(obj){obj.style.width =parseInt( obj.style.width) *5 ;obj.style.height =parseInt( obj.style.height)*5;}

function letsmall(obj){obj.style.width =parseInt( obj.style.width) /5;obj.style.height =parseInt( obj.style.height)/5;}

</script>

195400 发表于 2021-8-27 16:20

http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif


太宽了， 左边看不到。

195400 发表于 2021-8-27 16:23

红枫 发表于 2021-8-27 15:13
下面的可能是最简的图片放大代码了：




另一思路，是不是简单没验证。

小图片的mouseover事件，取图片src替换大图的图片。

红枫 发表于 2021-8-27 16:31

195400 发表于 2021-8-27 16:20
太宽了， 左边看不到。
可能适应我自己的显示器；您将浏览器缩小倍率看看。

谢谢你的反馈，谢谢您的欣赏！！

修改好了！

雄鹰翱翔 发表于 2021-8-27 18:05

欣赏老师精美音画佳作，赞一个！

195400 发表于 2021-8-27 18:07

<!--
<style type="text/css">
#samples        {
        position:absolute;left:100px;bottom:5px;
}
#samples img        {
        width:100px;height:50px;margin-left:20px;
}
#backPic         {
        width:1000px;height:550px;position:absolute;top:120px;left:100px;
}
#imgFrame        {
        width:960px;height:510px;
        position:absolute;top:140px;left:120px;
        background-image:();background-size:100% 100%;
}
#outblk        {
        width:1650px;height:850px;position:relative;
        background-image:url(https://z3.ax1x.com/2021/08/27/hMNsYj.png);
        background-position: left top;background-size:1650px 850px;
        postion:relative;margin:100px 0px 32px -200px;
}
</style>

<div id="outblk">

<img id="backPic" src="https://z3.ax1x.com/2021/08/27/hMUM3n.jpg">

<div id="imgFrame" ></div>

<div id="samples" style="width:1000px;height:60px;float:left;">
<img src="https://z3.ax1x.com/2021/08/27/hMdfnP.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdRXt.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdcpd.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdh0f.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMd478.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdIAS.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdotg.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdg1A.jpg" >
</div>
</div>
<script type="text/javascript">
        var imgSamples = document.querySelectorAll("#samples img");
        var imgFrame = document.querySelector("#imgFrame");
       
        for(n = 0; n < imgSamples.length; n++)        {
                imgSamples.onmouseover = function()        {
                        imgFrame.style.backgroundImage = "url(" + this.src + ")";
                }
                imgSamples.onmouseout = function()        {
                        imgFrame.style.backgroundImage = "url()";
                }
               
        }
</script>
似乎代码也不复杂
<style type="text/css">
#samples        {
        position:absolute;left:100px;bottom:5px;
}
#samples img        {
        width:100px;height:50px;margin-left:20px;
}
#backPic         {
        width:1000px;height:550px;position:absolute;top:120px;left:100px;
}
#imgFrame        {
        width:960px;height:510px;
        position:absolute;top:140px;left:120px;
        background-image:();background-size:100% 100%;
}
#outblk        {
        width:1650px;height:850px;
        background-image:url(https://z3.ax1x.com/2021/08/27/hMNsYj.png);
        background-position: left top;background-size:1650px 850px;
        postion:relative;
}
</style>

<div id="outblk">

<img id="backPic" src="https://z3.ax1x.com/2021/08/27/hMUM3n.jpg">

<div id="imgFrame" ></div>

<div id="samples" style="width:1000px;height:60px;float:left;">
<img src="https://z3.ax1x.com/2021/08/27/hMdfnP.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdRXt.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdcpd.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdh0f.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMd478.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdIAS.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdotg.jpg" >
<img src="https://z3.ax1x.com/2021/08/27/hMdg1A.jpg" >
</div>
</div>
<script type="text/javascript">
        var imgSamples = document.querySelectorAll("#samples img");
        var imgFrame = document.querySelector("#imgFrame");
       
        for(n = 0; n < imgSamples.length; n++)        {
                imgSamples.onmouseover = function()        {
                        imgFrame.style.backgroundImage = "url(" + this.src + ")";
                }
                imgSamples.onmouseout = function()        {
                        imgFrame.style.backgroundImage = "url()";
                }
               
        }
</script>

-->

195400 发表于 2021-8-27 18:12

红枫 发表于 2021-8-27 16:31
可能适应我自己的显示器；您将浏览器缩小倍率看看。

谢谢你的反馈，谢谢您的欣赏！！


现在可以看全了。
前四幅图片似乎没反应啊。

红枫 发表于 2021-8-27 18:35

195400 发表于 2021-8-27 18:12
现在可以看全了。
前四幅图片似乎没反应啊。

您的代码更简洁些，谢谢指导！

寒冬残荷 发表于 2021-8-27 19:34

红枫 发表于 2021-8-27 15:13
下面的可能是最简的图片放大代码了：




JS对退休前没有接触过网页知识的我这个老年人来说是望而生畏！:(你们年轻人或退休前接触过网页知识的老年人才看得懂。
页: [1] 2 3
查看完整版本: 代码音画：《中国山水画》----鼠标滑过放大图片