用js实现图片（小球）在屏幕上上下左右移动
<html>
<head>
<title>Document</title> </head>
<body style="background-image:URL('./b1.png')">
<div id="sundiv" style="position:absolute">
<img src="太阳.png"/>
</div>
<script language="javascript" type="text/javascript"> //定义全局变量
directX=1;//x轴的方向
directY=1;//y轴的方向
//上面两个全局变量似乎没有生效
sunX=0;//小太阳的坐标x
sunY=0;//小太阳的坐标y
function sunMove(){ sunX+=directX;
sunY+=directY;
//这条语句无法执行，竟然是因为<!doctype html>存在 //修改div的left top
sundiv.style.top=sunY+"px";
//window.alert(sunY);
//window.alert(sundiv.style.top);
sundiv.style.left=sunX+"px";
//判断什么时候，转变方法
//x方法（offsetWidth可以返回当前这个对象的实际宽度）
if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){
//window.alert(directX);
//directX-=directX;
directX=-directX;
}
//判断y
if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){
//directY-=directY;
directY=-directY;
//window.alert(directY);
}
} setInterval("sunMove()",3);
//这里写的是setInterval("sunMove()",100);，而不是
//setInterval("sunMove",100);
</script>
</body>
</html>
<!-- 运行上述代码时，出现一个巨坑，浏览器没有更新代码，害我刷新对运行结果根本影响。还有<!DOCTYPE html>这句话使代码无法正确运行 -->
用js实现图片（小球）在屏幕上上下左右移动的更多相关文章
- [Xcode 实际操作]一、博主领进门-(2)第一个工程项目：将导入的图片显示到屏幕上
目录:[Swift]Xcode实际操作 本文将演示创建第一个工程项目. 在项目导航区,鼠标右键[Assets.xcassets]资源文件夹. 隔壁右侧区域左下角点击[+],打开资源文件管理菜单-> ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- Unity3D之如何创建正确的像素比在屏幕上
关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- JS预览图像将本地图片显示到浏览器上的代码
js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- js实现图片粘贴上传到服务器并展示
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...
- android 图片大小适配，如何在不同屏幕上适配图片，如何设置可以自适应不同分辨率？
android 图片大小适配,如何在不同屏幕上适配图片,如何设置可以自适应不同分辨率? Android为了适应不同的分辨率,需要将不同的图片放到不同的drawable目录下,分辨率的匹配规则如下:dr ...
随机推荐
- iWatch报错: Missing com.apple.developer.healthkit entitlement
今天开发iWatch项目,报错: Optional (Error "Missing come.apple.developer.healthkit entitlement.") Us ...
- PHP提权之异步执行
在服务器上都会定时运行一些脚本以完成周期性的任务. 而这些脚本往往是以root权限启动的, 替换或者改变其中的内容就可以完成提权.而今天在这要讲解的就是php提权中的异步执行方法. 在php中一般大家 ...
- Unique Binary Search Trees I&II——给定n有多少种BST可能、DP
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- Socket概述及TCP/IP的C++实现
网络通信实际是应用进程之间的通信,而要完整的描述一个应用进程在网络中的位置必须用 IP+端口: Socket就是一种在网络中进行数据通信的一种抽象描述.它是一种协议,本地地址,本地端口的抽象. Soc ...
- C语言数据类型的转换
C语言的类型转换,一个是强制类型进行转换,而在这里要介绍的是自动的数据类型的转换,自动的数据类型转换很多时候是发生在多种数据类型混合使用的时候就会进行类型的转换,这样就会带来不能控制的结果,所以必须进 ...
- 命令行编译sass
一.安装ruby1.需要的软件设备: 2.安装过程:点击上图“应用程序”安装即可,注意安装过程中其中三项都需要打上勾.如若没有三项都打上勾则需要修改环境变量中的path路径后添加一个分号. 3.打开c ...
- 点击出现黑色背景的解决：-webkit-tap-highlight-color:rgba(0,0,0,0)
在手机上(iphone)点击按钮的时候,屏幕总会闪动一下,这让页面看起来很不友好也不流畅.解决方案加了一句css就解决了: -webkit-tap-highlight-color:rgba(0,0,0 ...
- 详细解析用Squid实现反向代理的方法
代理服务器是使 用非常普遍的一种将局域网主机联入互联网的一种方式,使用代理上网可以节约紧缺的IP地址资源,而且可以阻断外部主机对内部主机的访问,使内部网主机免受 外部网主机的攻击.但是,如果想让互联网 ...
- MySQL 优化、设计规则浅谈
当数据量大,数据库相应慢时都会针对数据库进行优化.这时都是要针对具体情况,具体业务需求进行优化的. 但是有些步骤和规则应该适合各种情况的.这里综合网上找的资料简单分析一下. 第一优化你的sql和索引: ...
- ubuntu16.04--在标题栏显示网速
有时感觉网络失去响应,就通过Ubuntu 14.04自带的系统监视器程序来查看当前网速,但是这样很不方便,遂打算让网速显示在标题栏,那样就随时可直观的看到.一番搜索尝试后,成功实现!同时也实现了CPU ...