这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了原生 JS 实现图片左右不停运动的完整示例代码,可直接保存到 html 文档打开可以查看效果。下面跟着小编一起来看下吧
本效果使用 js 实现,当图片移动到 200 像素后回到 0 像素再向右移动 200 像素一直左右移动,不需要 marquee 标签。
完整的 HTML 代码如下,保存到 HTML 文档打开可以查看效果:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- JS使图片左右移动_何问起
- </title>
- <meta charset="utf-8" />
- <base target="_blank" />
- <style>
- a{color:blue;}
- </style>
- </head>
- <body>
- <p>
- mag:
- </p>
- <input type="text" id="pos" />
- <br />
- <input type="button" onclick="move()" value="开始" />
- 请点击按钮
- <br />
- <div style="position:relative;min-width:600px;min-height:120px;">
- <img id="img" style="position:absolute; left:100px;" src="http://hovertree.com/themes/hvtimages/hlogo.png"
- />
- </div>
- <div>
- <a href="http://hovertree.com/h/bjaf/62ak7aig.htm">
- 查看代码
- </a>
- <a href="http://hovertree.com">
- 返回首页
- </a>
- <a href="http://hovertree.com/texiao/">
- 更多特效
- </a>
- </div>
- <script>
- var hovertreeStep, hovertreeTurn = true;
- function move() {
- var mag = parseInt(document.getElementById("img").style.left);
- document.getElementById("pos").value = mag;
- if (hovertreeTurn) {
- hovertreeStep = 1;
- hovertreeTurn = false;
- }
- if (mag > 200) {
- hovertreeStep = -1;
- }
- if (mag < 1) {
- hovertreeStep = 1;
- }
- document.getElementById("img").style.left = (mag + hovertreeStep) + "px";
- window.setTimeout("move()", 50);
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0531/328991.html