这篇文章主要介绍了 js 实现的简单图片浮动效果, 以完整实例形式分析了 javascript 实现图片定时漂浮移动功能的方法, 涉及 javascript 定时函数与数值动态运算相关技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现的简单图片浮动效果。分享给大家供大家参考,具体如下:
利用 window 对象,实现一个图片的浮动效果
1、现有一个广告 div,就是我们要控制的,它的起始点(0,0)
2、设定横向和纵向的速度
3、控制广告 div 移动
1)广告 div 是否达到边界
2)如果到达边界后,我们设置速度反向移动
- <!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>
- div{ position:absolute; } img{ position:absolute; filter:alpha(opacity=100);/*
- IE */ -moz-opacity:1;/* Moz + FF */ opacity: 1;/* 支持CSS3的浏览器(FF 1.5也支持)*/
- }
- </style>
- </head>
- <body>
- <div id="divimg">
- <img src="123.jpg" width="100" height="150">
- </div>
- <script language="JavaScript" type="text/javascript">
- //获取图片所在的div对象
- var img = document.getElementById("divimg");
- //设置div 左上角坐标 ,起始点的坐标
- var x = 10,
- y = 10;
- //设置图片的行进速度
- var xSpeed = 2,
- ySpeed = 1;
- //设置图片的最大浮动的高度和宽度
- var w = document.documentElement.clientWidth - 110,
- h = document.documentElement.clientHeight - 160;
- function floatimg() {
- //比较图盘是否到达边界
- //如果到达边界以后,我们控制图片改变方向
- if (x > w || x < 0) {
- xSpeed = -xSpeed;
- }
- if (y > h || y < 0) {
- ySpeed = -ySpeed;
- }
- //如果没有达到边界,设置图片的左上角的坐标
- //设置坐标值 起始坐标+速度
- x += xSpeed;
- y += ySpeed;
- img.style.top = y + "px";
- img.style.left = x + "px";
- //延迟调用函数floatimg(),每个40毫秒调用一次
- setTimeout("floatimg()", 40);
- }
- floatimg();
- </script>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0222/265901.html