<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实现图片（小球）在屏幕上上下左右移动的更多相关文章

  1. [Xcode 实际操作]一、博主领进门-(2)第一个工程项目：将导入的图片显示到屏幕上

    目录:[Swift]Xcode实际操作 本文将演示创建第一个工程项目. 在项目导航区,鼠标右键[Assets.xcassets]资源文件夹. 隔壁右侧区域左下角点击[+],打开资源文件管理菜单-> ...

  2. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  3. Unity3D之如何创建正确的像素比在屏幕上

    关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. JS预览图像将本地图片显示到浏览器上的代码

    js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  6. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  7. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  9. android 图片大小适配，如何在不同屏幕上适配图片，如何设置可以自适应不同分辨率？

    android 图片大小适配,如何在不同屏幕上适配图片,如何设置可以自适应不同分辨率? Android为了适应不同的分辨率,需要将不同的图片放到不同的drawable目录下,分辨率的匹配规则如下:dr ...

随机推荐

  1. Php网站如何优化才好？

    尽量静态化:    如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍.   当然了,这个测试方法需要在十万级以上次执行,效果才明显.   其实静态方法和非 ...

  2. Scrapy安装向导

    原文地址 https://doc.scrapy.org/en/latest/intro/install.html 安装Scrapy Scrapy运行在python2.7和python3.3或以上版本( ...

  3. Java NIO之Charset类字符编码对象

    介绍 java中使用Charset来表示编码对象 This class defines methods for creating decoders and encoders and for retri ...

  4. C语言序列点问题总结（大多数高等教育C语言教学课程的漏洞）

    C语言序列点总结 2013年11月21于浙大华家池 C 语言副作用: (side effect)是指对数据对象或者文件的修改. 例如,语句 v = 99;的副作用是把 v 的值修改成 99. C语言序 ...

  5. 关于React的Container&Presentational Component模型结构分析

    react.js javascript 3 之前翻译了两篇关于Container&Presentational Component模型的文章,一篇是基础的Container和Component ...

  6. 制作FAT12软盘以查看软盘的根目录条目+文件属性+文件内容

    [-1]Before for specific info , please visit http://wiki.osdev.org/Loopback_Device [0]我们先上干货,看到效果后,我们 ...

  7. 2014新浪研发project师实习笔试（哈尔滨站）

    刚经历了新浪笔试,写篇博客记录一下下.方便以后查看. 一.基础题 1.栈和队列的异同点. 2.算法性能的4个评价标准. 排序算法中最稳定的算法. 那几个算法的空间复杂度是O(1)的. 3.线性表,平衡 ...

  8. 关于Gradle和Gradle插件的问题

    一.   Gradle更新插件问题 当更新Andorid studio 的时候,你可能会接收到一条让你更新Gradle插件到最新版本的建议.在项目编译需要的基础上,你可以选择接受或者手动选择一个具体的 ...

  9. 一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案

    前言 近几年视频直播可以说是非常火热,EasyDarwin也非常受开发者的欢迎,不仅仅是主播火了,而且各种商业直播也火了起来:会场直播.宴会直播.讲座直播.景区直播.后厨直播.课堂直播.幼儿园直播等等 ...

  10. 九度OJ 1162：I Wanna Go Home（我想回家） （最短路径）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:870 解决:415 题目描述: The country is facing a terrible civil war----cities i ...