代码应用用代码制作点击小图看大图（代码程序图片）

今天给各位分享代码应用用代码制作点击小图看大图的知识，其中也会对代码程序图片进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、点击缩略图显示大图的js代码
• 2、如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？
• 3、ASP中点击小图在原窗口弹出图层显示大图这个效果怎样实现?
• 4、下段代码中如何实现每张图片点击放大效果？
• 5、flash怎样制作点击小图看大图
• 6、html点击小图链接到大图的代码

点击缩略图显示大图的js代码

您好：效果我感觉应该是和淘宝的宝贝页面差不多的吧？下面是小图，然后点击后上面换成对应的大图。思路：上面默认加载时候加载第一张大图，下面加载出所有的小图。给下面的所有小图加单击事件，在事件中获取想要更改上面大图的图片SRC地址，然后动态赋值给上面已经有的那个img标签的src属性上。就可以动态改变上面图片了。

如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能？

这个一般是用css来显示特定内容的。

譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。

.sa

{width:20px;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

-20px

-30px;}

注解：

宽度和高度是控制显示范围的

overflow:hidden是确保不会有多余显示

background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的

no-repeat是不会重复，这个不是必须的，不过有会规范一些

-20px

-30px是图片的定位，显示时会将图片按这个坐标来定位

上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。

如果大小不固定，也可以这样定义，让背景自适应：

.sa

{width:auto;

height:20px;

overflow:hidden;

background:url(icon.png)

no-repeat

right

bottom;}

对于图片2(首页标签)的内容，也是这么使用的：

.a

{width:100px;

height:25px;

overflow:hidden;

background:url(2.png)

no-repeat

left

center;}

.a:hover

{background-position:right

center;}

这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。

不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。

ASP中点击小图在原窗口弹出图层显示大图这个效果怎样实现?

MM_showHideLayers('Layer1','','hide')

这里 点击执行了这个js函数

你把这个函数找出来研究下嘛

.........

你直接把他的js文件down下来 找一下里面的MM_showHideLayers函数

这个函数的功能就是

下段代码中如何实现每张图片点击放大效果？

html

headtitle/title

script

var bigpic = new Array();

bigpic[0] = "";

bigpic[1] = "";

function show(i)

{

if(i=bigpic.length)

{

alert("数组越界了");

return false;

}

var hideobj=document.getElementById("hidediv");

hideobj.style.display="block";

hideobj.style.height=document.body.clientHeight+"px";

document.getElementById("showhide").style.display="block";

document.getElementById("showhide").innerHTML="img src=\""+bigpic[i]+"\" width=\"600\" height=\"200\" onClick=\"hide();\" /";

}

function hide()

{

document.getElementById("hidediv").style.display="none";

document.getElementById("showhide").style.display="none";

}

/script

style

body{margin:0px;padding:0px;}

#hidediv{position:absolute;left:0px;top:0px;width:100%;background-color:#ddf;filter:alpha

(opacity=60);opacity=60;display:none;z-Index:2;}

#showhide{position:absolute;width:100%;text-align:center;padding-top:80px;display:none;cursor:pointer;z-Index:3;}

#content{position:relative;text-align:center;cursor:pointer;z-Index:1;}

/style

/head

body

div id="hidediv"/div

div id="showhide"/div

div id="content"

img src="" width="78" height="52" onClick="show(0);"

img src="" width="78" height="52" onClick="show(1);"/div

/body

/html

flash怎样制作点击小图看大图

插入影片剪辑，在主时间轴建立实例，命名为my_mc。在帧上加代码：

var flag:Number = 0;

my_mc.onRelease = function() {

if (flag == 0) {

my_mc._xscale = my_mc._yscale=200;

flag = 1;

} else {

my_mc._xscale = my_mc._yscale=100;

flag = 0;

}

};

以上是改变原始MC的大小。也可以这么做，在一个固定区域显示放大后的图片。因为有多张图，一张图就做一个MC，在舞台上排列好。以一个my_mc为例，代码如下：

var flag:Number = 0;

my_mc.onRelease = function() {

my_mc.duplicateMovieClip("new_mc", 2);

new_mc._x = 0;//放大图片的坐标

new_mc._y = 0;

if (flag == 0) {

new_mc._xscale = new_mc._yscale=200;

flag = 1;

} else {

new_mc.removeMovieClip();

flag = 0;

}

};

单击原始图片，显示放大后的图片，再次单击则删除放大后的图片。

html点击小图链接到大图的代码

a标签的href属性是重定向为一个url（统一资源定位符）；可以链接一个页面。

你想要的那种效果：首先将你的那张大的照片放进 一个html页面中比如 将大图a.jpg放到了a.html中

在缩略图的页面写下a href="a.html"img src="小图图片"/a

就可了。

代码应用用代码制作点击小图看大图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于代码程序图片、代码应用用代码制作点击小图看大图的信息别忘了在本站进行查找喔。