js实现简单小实例（奔跑的小猪）

野性酷女 2022-04-22 00:38 141阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>window对象</title>
    		<style>
    			#img{
    				width: 300px;
    				height: 300px;
    				position: absolute;
    				left: 0px;
    				top: 50%;
    			}
    			
    		</style>
    		<script>
    			var w ;//页面的宽度
    			var img;//图像对象
    			var imgLeft;//图像左边的位置
    			var imgWidth; //图像 的宽度
    			var delta =5 ;//每次移动的距离
    			var delay =10;//时间
    			window.onload = function(){
    				
    				w = window.innerWidth;
    				img = document.getElementById("img");
    				imgLeft = img.offsetLeft;
    				imgWidth = img.width;
    				//调用move（）方法
    				move();
    			};
    			function move(){
    				//判断图像是否越界（超出页面的宽度）
    				if(imgLeft<0||imgLeft+imgWidth>w){
    					delta=-delta;//变号
    				}
    				img.style.left = imgLeft+delta+"px";
    				//移动位置后需要重新修改左边的位置
    				imgLeft = img.offsetLeft;
    				//重复不断调用函数
    				setTimeout(move,delay);
    			}		
    		</script>
    	</head>
    	<body>
    	   
    		<img src="img/img.jpg" id="img" /> 
    	</body>
    </html>

![1][] 奔跑的小猪

[1]: /images/20220422/3aa213725f014fabb33216b57f2ba0d3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 ZSTUOJ 三只小猪

Problem : 三只小猪 Description 这日，快码佳编四兄弟姐妹来到了一个山脚下，只听一个老奶奶给两个孙子讲故事。你听说过三只小猪的故事吗？这是

朴灿烈づ我的快乐病毒、/ 2023年06月27日 05:46/ 0 赞/ 23 阅读

相关 leetcode-可怜的小猪解法

[418、可怜的小猪][418] > 有 1000 只水桶，其中有且只有一桶装的含有毒药，其余装的都是水。它们从外观看起来都一样。如果小猪喝了毒药，它会在 15 分钟内死

曾经终败给现在/ 2023年06月11日 05:19/ 0 赞/ 26 阅读

相关 JS小功能：贪吃蛇游戏简单的实现

实现思路在贪吃蛇游戏的实现中，主要创建了五个对象来实现游戏的搭建，分别为： Tools：工具对象，产生随机数 Food：食物对象，在地图上随机产生食物 Sn

约定不等于承诺〃/ 2022年11月25日 00:52/ 0 赞/ 190 阅读

相关小鸡小猪大历险java_小鸡和小猪

在疯狂动物城的一次聚会上，小鸡和小猪认识了。小鸡很漂亮，小猪很热情，他们很快成了好朋友。小猪对小鸡说：小鸡小鸡，来我家玩吧，我家有好多美味的猪食和零食，我们一起分享吧！

比眉伴天荒/ 2022年11月10日 05:52/ 0 赞/ 30 阅读

相关奔跑的小熊动画css

![在这里插入图片描述][5c75738a2c8140beaa5048ad878cee55.png]![在这里插入图片描述][90f5e4fa02a144efb0e204e06

超、凢脫俗/ 2022年09月07日 14:38/ 0 赞/ 220 阅读

相关 Java WebService 简单小实例

前言： WebService到底是什么？ Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet

心已赠人/ 2022年08月23日 08:41/ 0 赞/ 196 阅读

相关 js实现简单小实例（奔跑的小猪）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>w

野性酷女/ 2022年04月22日 00:38/ 0 赞/ 142 阅读

相关 python绘制小猪佩奇

今天早上看到朋友圈被小猪佩奇刷屏了，然后中午看到推送有用代码实现小猪佩奇的绘制过程，但是代码不全，所以自己尝试着实现了一下。大致分两步： 1. 手绘小猪佩奇，然后算出

深碍√TFBOYSˉ_/ 2022年03月25日 06:28/ 0 赞/ 275 阅读

相关【小猪佩奇漫画】| 复杂度分析原来那么简单！

1、数据结构是用来干嘛的？ > 数据结构与算法的诞生是让计算机「执行的更快」、「更省空间」的。 2、用什么来评判数据结构与算法的好坏？ > 从「执行时间」和「占用

矫情吗；*/ 2022年01月20日 12:19/ 0 赞/ 301 阅读

相关 js、jq小实例面试

1、动态设置显示的位置（x、y是获得鼠标的坐标），css不需设置left、top等 $(".rt_mouse_box").show().css({left:x,top

た入场券/ 2021年10月19日 02:34/ 0 赞/ 257 阅读