谁能给个多个图片显示的炫酷效果代码啊？
CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)
首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{ background-image: url(9pic2.jpg); width: 100px; height: 100px;}这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。
比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：
#item2{ background-position: -100px 0;}其他的同理。
最后贴出来一个例子，看明白了这个属性就懂了。
用到的另一张图片名字叫9pic1.jpg,先贴出来：
代码如下：
背景background-position切图 .showImage{ background-image: url(9pic2.jpg); width: 100px; height: 100px; } .showImage:hover{ background-image: url(9pic1.jpg); } ul{ list-style: none; } ul li{ float: left; margin: 20px; } #item1{ background-position: 0 0; } #item2{ background-position: -100px 0; } #item3{ background-position: -200px 0; } #item4{ background-position: 0 -100px; } #item5{ background-position: -100px -100px; } #item6{ background-position: -200px -100px; } #item7{ background-position: 0 -200px; } #item8{ background-position: -100px -200px; } #item9{ background-position: -200px -200px; } 这个例子把那个图片打散，横排在页面上，还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。
如果是提交表单一类的按钮，可以为:并在js中写函数进行处理
如果是要跳转页面一类的按钮 ，也可以写为 答案补充 之后可以用mouseover更改它的src属性
<html>
<head>
<title>6</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #000;
}
#screen img {
position: absolute;
cursor: pointer;
visibility: hidden;
width: 0px;
height: 0px;
}
#screen .tvover {
border: solid #876;
opacity: 1;
filter: alpha(opacity=100);
}
#screen .tvout {
border: solid #fff;
opacity: 0.7;
}
#bankImages {
display: none;
}
</style><script type="text/javascript">
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed)
{
this.position += (target - this.position) * speed;
}
}var tv = {
/* ==== variables ==== */
O : [],
screen : {},
grid : {
size : 4, // 4x4 grid
borderSize : 6, // borders size
zoomed : false
},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x : new Library.ease(),
y : new Library.ease(),
zoom : new Library.ease(),
focalLength : 750 // camera Focal Length
}, /* ==== init script ==== */
init : function ()
{
this.screen.obj = document.getElementById('screen');
var img = document.getElementById('bankImages').getElementsByTagName('img');
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag = function () { return false; }
/* ==== create images grid ==== */
var ni = 0;
var n = (tv.grid.size / 2) - .5;
for (var y = -n; y <= n; y++)
{
for (var x = -n; x <= n; x++)
{
/* ==== create HTML image element ==== */
var o = document.createElement('img');
var i = img[(ni++) % img.length];
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */
o.point3D = {
x : x,
y : y,
z : new Library.ease()
};
/* ==== push object ==== */
o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);
/* ==== on mouse over event ==== */
o.onmouseover = function ()
{
if (!tv.grid.zoomed)
{
if (tv.o)
{
/* ==== mouse out ==== */
tv.o.point3D.z.target = 0;
tv.o.className = 'tvout';
}
/* ==== mouse over ==== */
this.className = 'tvover';
this.point3D.z.target = -.5;
tv.o = this;
}
}
/* ==== on click event ==== */
o.onclick = function ()
{
if (!tv.grid.zoomed)
{
/* ==== zoom in ==== */
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
tv.camera.zoom.target = tv.screen.w * 1.25;
tv.grid.zoomed = this;
} else {
if (this == tv.grid.zoomed){
/* ==== zoom out ==== */
tv.camera.x.target = 0;
tv.camera.y.target = 0;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
tv.grid.zoomed = false;
}
}
}
/* ==== 3D transform function ==== */
o.calc = function ()
{
/* ==== ease mouseover ==== */
this.point3D.z.move(this.point3D.z.target, .5);
/* ==== assign 3D coords ==== */
var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
var z = this.point3D.z.position * tv.camera.zoom.position;
/* ==== perform rotations ==== */
var xy = tv.angle.cx * y - tv.angle.sx * z;
var xz = tv.angle.sx * y + tv.angle.cx * z;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
/* ==== 2D transformation ==== */
this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
this.point2D.x = yx * this.point2D.scale;
this.point2D.y = xy * this.point2D.scale;
this.point2D.w = Math.round(
Math.max(
0,
this.point2D.scale * tv.camera.zoom.position * .8
)
);
/* ==== image size ratio ==== */
if (this.ratioImage > 1)
this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
else
{
this.point2D.h = this.point2D.w;
this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
}
}
/* ==== rendering ==== */
o.draw = function ()
{
if (this.complete)
{
/* ==== paranoid image load ==== */
if (!this.loaded)
{
if (!this.img)
{
/* ==== create internal image ==== */
this.img = new Image();
this.img.src = this.src;
}
if (this.img.complete)
{
/* ==== get width / height ratio ==== */
this.style.visibility = 'visible';
this.ratioImage = this.img.width / this.img.height;
this.loaded = true;
this.img = false;
}
}
/* ==== HTML rendering ==== */
this.style.left = Math.round(
this.point2D.x * this.point2D.scale +
tv.screen.w - this.point2D.w * .5
) + 'px';
this.style.top = Math.round(
this.point2D.y * this.point2D.scale +
tv.screen.h - this.point2D.h * .5
) + 'px';
this.style.width = this.point2D.w + 'px';
this.style.height = this.point2D.h + 'px';
this.style.borderWidth = Math.round(
Math.max(
this.point2D.w,
this.point2D.h
) * tv.grid.borderSize * .01
) + 'px';
this.style.zIndex = Math.floor(this.point2D.scale * 100);
}
}
}
}
/* ==== start script ==== */
tv.resize();
mouse.y = tv.screen.y + tv.screen.h;
mouse.x = tv.screen.x + tv.screen.w;
tv.run();
}, /* ==== resize window ==== */
resize : function ()
{
var o = tv.screen.obj;
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
{
tv.screen.x += o.offsetLeft;
tv.screen.y += o.offsetTop;
}
}, /* ==== main loop ==== */
run : function ()
{
/* ==== motion ease ==== */
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
tv.camera.zoom.move(tv.camera.zoom.target, .05);
/* ==== angles sin and cos ==== */
tv.angle.cx = Math.cos(tv.angle.x.position);
tv.angle.sx = Math.sin(tv.angle.x.position);
tv.angle.cy = Math.cos(tv.angle.y.position);
tv.angle.sy = Math.sin(tv.angle.y.position);
/* ==== loop through all images ==== */
for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}
/* ==== loop ==== */
setTimeout(tv.run, 32);
}
}/* ==== global mouse position ==== */
var mouse = {
x : 0,
y : 0
}
document.onmousemove = function(e)
{
if (window.event) e = window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
return false;
}</script>
</head><body><div id="screen"></div><div id="bankImages">
<img alt="" src="images/wi23.jpg">
<img alt="" src="images/wt06.jpg">
<img alt="" src="images/wt47.jpg">
<img alt="" src="images/wt16.jpg"> <img alt="" src="images/wt43.jpg">
<img alt="" src="images/wt19.jpg">
<img alt="" src="images/wt27.jpg">
<img alt="" src="images/wt46.jpg"> <img alt="" src="images/wt14.jpg">
<img alt="" src="images/wt21.jpg">
<img alt="" src="images/wt35.jpg">
<img alt="" src="images/wt48.jpg"> <img alt="" src="images/wt55.jpg">
<img alt="" src="images/wt40.jpg">
<img alt="" src="images/wt53.jpg">
<img alt="" src="images/wt25.jpg"></div><script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script></body>
</html>
在桌面显示多个图片如何弄
请你先尝试这个方法：右键点击桌面---点属性---点桌面---自定义桌面---点现在清理桌面---下一步---在你要清理的快捷方式前打钩（别的钩都去掉）---下一步---完成。然后，在“未使用的桌面快捷方式”中找到它，再去删除它。不行就--- 安全模式下，用一下360急救箱、金山急救箱、windows清理...
authorware中 用一个显示图标显示多张图片 程序中如何能浏览上一张...
右下角有一个“+”点击打开，就可以选取多个图片一起导入，选择完成以后确定“导入”，就可以同时出现多个显示图标，每个显示图标里面有一张导入的图片。 ,
怎样在word中插入多个文件夹图
1、在电脑上打开一个word文档，然后打开有图片的文件夹，确保这两个窗口都可以完整显示；2、按住键盘上的【ctrl】键，同时用鼠标按顺序选中需要导入的图片；3、选中完图片后，用鼠标放在第一张图片上，将多个图片拖入到word窗口中，随后就可以松开按住的鼠标；4、完成以上操作后，就能在WORD一次插入多张...
能一次显示多个图片的图片浏览器
如果是看漫画的话 推荐你个专业级的软件 ComicsViewer V1.40 中文绿色版_为漫画开发的图像浏览器内置些专用功能 专为看漫画而开发的图像浏览器，内置许多漫画专用功能。新手可以使用书签、现场保护、单键浏览等功能获得比ACDSee更多的方便性；老手可以使用ACDSee所没有的图像增强显示技术，获得最完美的显示...
MFC中怎么实现多个图片的连续显示?
在C...APP文件的InitInstance()里写一段SetTimer(1,1000,NULL);其中1000可以改为你要时间，单位毫秒。然后在C...Dlg上右键--增加消息处理，选择WM_TIMER，选择添加并编辑，在OnTimer（）里写如下：static int x = 0;CBitmap bitmap;bitmap.LoadBitmap(IDB_BITMAP1+(x++));BITMAP bmp;bitmap...
在电脑桌面显示多个图片的程序或方法
你可以自己制作一个GIF格式的壁纸，也可以PS一张静态图片设为壁纸。
多个窗口显示多张图片
实现这个功能的方法很多,其实ACDsee看图软件都可以的,另外告诉你一个 如果你机器上的IE浏览器是IE7的话,因为IE7支持多窗口.这样你就可以在IE浏览器里打开第一个图片了.如果不是IE7你下载腾讯的TT浏览器也可以.打开图片的方法就是在浏览器里,文件---打开(打开类型选择JPG图片文件)OK这样就多窗口了 ...
authorware中 用一个显示图标显示多张图片 程序中如何能浏览上一张...
1、在交互图标的前面，加一个显示图标，双击打开其演示窗口，在适当的位置写下文字，比如“赛迪网电脑应用频道”，调整好字体、大小和颜色等。2、将上面操作中第二步的计算图标改为运动图标，命名不变，仍为“x=1”。先打开刚才那个显示图标，关闭后，再双击运动图标，则同时打开运动图标的属性对话框和...
ps把多个图片汇成一个海报?ps怎么把几张做成海报
3、点开菜单栏的“图像”；再用鼠标单击一下“图像大小”，查看图片的尺寸。（操作后查看到的两张图片的大小分别如图1-3-A和1-3-B所示）（提示：PS中可以用快捷键“Ctrl+Tab”或者点击标题栏来选中需要显示的图片。）4、点击一下菜单栏的“图像”；然后再点击“画布大小”。5、在弹出的画布大小...
我用的ACD看图片,一次只能打开一个图片怎么能同时多打开几个
哈哈！我刚也知道！在你打开的一张图中，选择“工具”，再选择“选项”，再选“查看器”，从“查看器”中找到“启动文件（T）”最后在“启动文件（T）”这里选择“在新窗口中打开图像”就对了 选完以后，按“确定”，然后你选定多个图片，再按“回车”就有多张图显示了！望大家赞同！O(∩_∩)...
潘拜曲安： 一个表格,一行三列.每列单元格放入代码.,可具体设置MARQUEE的属性值达到不同效果
徐水县15242131736： 怎么制作多个图片循环展示？
潘拜曲安： 进入控制面版----首页内容维护----空白面版设置----勾选显示代码, 然后输入以下代码 (当然如果你想在文章中加滚动图片,只要点击编辑页面的显示源代码就可以了) 其中最上面的width和height是指整个的滚动图片的范围,下面的width和height是指图片的大小,地址是指图片的网址,如果想要使图片上下滚动,只要将behavior=alternate 换成direction=up就可以了.(当然也可参考滚动文字的办法,同样的道理) 然后选择定制我的首页,选取刚才设置的空白面版就可以了.当然在文章中添加滚动图片只要勾掉显示源代码,然后再空白处编辑文字就可以了. 欢迎到我家做客
徐水县15242131736： 求DW多张图片交替显示的代码 - ？
潘拜曲安： 图片滚动代码 (从右向左滚动) 图片滚动代码 (从下往上滚动) 文字来回滚动代码:
徐水县15242131736： 左右滑动多张图片特效,急!？
潘拜曲安： 代码地址: http://www.codefans.net/jscss/code/1504.shtml 演示的话点代码下面的运行代码就可以看到了! —————————————————————————— 如果能够帮助你解决问题,那么希望你点击“采纳”, 举手之劳,将鼓励我们继续解答其他QQ网友的问题,谢谢!
徐水县15242131736： 多张图片交替变换的代码谁有?？
潘拜曲安： 多张图片交替变换的JS效果 Posted in Techno by l4ever on 2004-08-09. 程序代码// 设置轮番显示速度 Set slideShowSpeed (milliseconds) var slideShowSpeed = 2000; // 匀滑转换时间 Duration of crossfade (seconds) var crossFadeDuration = ...
徐水县15242131736： C# picturebox 显示多张图片,并自动从左往右滚动 - ？
潘拜曲安： 需要用timer 控件 把图片的名字放在一个数组中 然后在 timer的Tick事件中给picturebox 复制 在赋值之前判断下 要是不是最后一张就让数组的下标++;到最后一张就让下标重新等于0
徐水县15242131736： vb 如和将多个图片进行百叶窗效果显示？
潘拜曲安： 不是为得分只是看到你提的问题很感兴趣,方法好多种我介绍个直接点的笨方法就是用画点来实现. 在窗体上加2个PictureBox控件,名为picture1与picture2,一个时间控件名为timer1使用以下代码. '------------------------------------------------------ Dim j...
徐水县15242131736： flash代码 多个图片随机出现但不能重复 - ？
潘拜曲安： flash中如何使许多相同图片随机消失 werPoint虽然有“自定义动画”的gong能,但这些动画都因有了固定的模式,往往不能满足我们的实际需要.因此,有必要利用别的办法来增添PowerPoint的动画gong能.一、灵活应用“自定义动画”达到...
徐水县15242131736： 求:多张图片单行从左到右无间断循环滚动的代码 - ？
潘拜曲安： <div id=demo_ style=＂overflow:hidden;height:180px;width:710px;＂> <table align=leftcellpadding=0 cellspace=0 border=0><tr><td id=demo1_ valign=top><table width=＂710＂ border=＂0＂ cellspacing=＂0＂ cellpadding=＂2＂> <tr> <td ...
徐水县15242131736： 帮忙在DW源代码中写个代码 能实现多个图片是滚动的,鼠标经过图片会停止且变成另外一张图片的网页特效,？
潘拜曲安： 这个可以使用JS,网上模板很多,可以下载使用,也可以不用JS.方法很多种,看你自己的基础 了.
