javascript特效：飘动的图片

2019-11-18 13:27:42

字体：大中小

来源：转载

供稿：网友

　　首先我们自己动手做一张背景为透明色的图片，格式可以自己定制，但最好是GIF动画的，这样可以增加动感效果，再把以下代码加入到Html的任意位置，注重：把连接地址“href=”和图片的位置“src=”填写好。
　　
　　＜div id="img" style="position:absolute;"＞
　　＜a href="路径/*.htm"＞＜img src="路径/*.gif"border="0"＞＜/a＞
　　＜/div>
　　
　　　　然后把以下代码复制到你的记事本里，选择文件->另存为，在输入框中键入"piao.js"（注重：引号千万不能少，以便保证你存储的文件的括展名是.js）
　　
　　　
　　
　　＜!--
　　var XPos = 20;
　　var yPos = document.body.clientHeight;
　　var step = 1;
　　var delay = 30;
　　var height = 0;
　　var Hoffset = 0;
　　var Woffset = 0;
　　var yon = 0;
　　var xon = 0;
　　var pause = true;
　　var interval;
　　img.style.top = yPos;
　　function changePos() {
　　width = document.body.clientWidth;
　　height = document.body.clientHeight;
　　Hoffset = img.offsetHeight;
　　Woffset = img.offsetWidth;
　　img.style.left = xPos + document.body.scrollLeft;
　　img.style.top = yPos + document.body.scrollTop;
　　if (yon) {
　　yPos = yPos + step;
　　}
　　else {
　　yPos = yPos - step;
　　}
　　if (yPos ＜ 0) {
　　yon = 1;
　　yPos = 0;
　　}
　　if (yPos >= (height - Hoffset)) {
　　yon = 0;
　　yPos = (height - Hoffset);
　　}
　　if (xon) {
　　xPos = xPos + step;
　　}
　　else {
　　xPos = xPos - step;
　　}
　　if (xPos ＜ 0) {
　　xon = 1;
　　xPos = 0;
　　}
　　if (xPos >= (width - Woffset)) {
　　xon = 0;
　　xPos = (width - Woffset);
　　}
　　}
　　function start() {
　　img.visibility = "visible";
　　interval = setInterval('changePos()', delay);
　　}
　　start();
　　// End --＞

上一篇：JavaScript的编程

下一篇：JavaScript在E-mail中的应用

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注