javascript实现的一个图片转移效果

更新时间：2007年06月03日 00:00:00 作者：

应网友要求修改一个图片转移效果一个比较漂亮的效果，只是在增加图片效果时有些麻烦。今天应网友的要求，对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。
var firstnum = 1;
var secnum = 2;
var tounum=1;
这三个变量分别作用是传入图片 ID 变量。以及保存当前图片 ID 便于操作！相信大家都会很容易的修改成自己想要的效果 !
代码如下:

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} </style> <script> var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var firstnum = 1; var secnum = 2; var tounum=1; function moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+firstnum).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ticked += 20; } } </script> <a href="javascript:moveItem(1,tounum);"><img src="http://www.szrgb.net/text/moveimg/images/1.GIF" width="129" height="97"></a> <a href="javascript:moveItem(2,tounum);"><img src="http://www.szrgb.net/text/moveimg/images/2.JPG" width="134" height="100"></a> <a href="javascript:moveItem(3,tounum);"><img src="http://www.szrgb.net/text/moveimg/images/3.JPG" width="134" height="100"></a> <a href="javascript:moveItem(4,tounum);"><img src="http://www.szrgb.net/text/moveimg/images/4.jpg" width="101" height="134"></a> <div align="right" id="mainid"> <div id="y1" class="imgbox"><img src="http://www.szrgb.net/text/moveimg/images/1.GIF"></div> <div id="y2" class="moveimgbox"><img src="http://www.szrgb.net/text/moveimg/images/2.JPG" width="400" height="300"></div> <div id="y3" class="moveimgbox"><img src="http://www.szrgb.net/text/moveimg/images/3.JPG" width="387" height="290"></div> <div id="y4" class="moveimgbox"><img src="http://www.szrgb.net/text/moveimg/images/4.jpg" width="281" height="374"></div> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript实现的一个图片转移效果

相关文章

js放大镜放大图片效果
非常漂亮的js放大镜效果代码，对于浏览图片效果应该不错哦
2008-05-05
js实现图片加载时候逐渐出现的杂色效果
有一些网站在加载图片的时候不是一下子就出来了，而是由模糊到清淅，或是由一种不占用过多网络资源的方式先大致显示，然后再慢慢加载，避免因用户等不及将网页关掉，像马赛克效果、沙子效果等
2010-08-08
超级简单的图片防盗(HTML),好用
超级简单的图片防盗(HTML),好用...
2007-04-04
使用html+css制作一个发光立方体特效
这篇文章主要介绍了使用html+css制作一个发光立方体特效,发光的同时立方体自动旋转,非常炫酷的特效,来一起学习一下怎么制作吧
2023-03-03
禁止在图片上使用右键
为了阻挡一般用户不能使用图片另存为的功能，这里使用JavaScript对右键菜单做了限制，当在图片上点击右键的时候，会弹出一个提示，提示无法操作图片，注意，这种方法对高手可能无效果。
2009-10-10
js 图片缩放（按比例）控制代码
js 图片缩放（按比例）实现代码。
2009-05-05
ImageFlow可鼠标控制图片滚动
大家以前看到的都是FLASH，现在看看JS也来做。提示：支持键盘左右键。拉条可以快速浏览。
2008-01-01
用JavaScript显示随机图像或引用
本文会教你如何用简单的JavaScript 创建所有可能条目的数组，然后随机选择你需要加入网页中的图像或引用。
2009-04-04
javascript 图片放大缩小功能实现代码
很早以前写的一个效果，今天有时间了整理出来通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸
2011-07-07
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox...
2007-03-03

最新评论