这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
图片的左右移动,具备像荡秋千一样的动画效果,图片自己可重新定义,移动速度和距离也可在代码内设定,挺简单的 Js 生成动画的特效代码,仅供参考。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>
- 图片的左右移动,动画效果的实现
- </title>
- <script language="JavaScript">
- < !--step = 0;
- obj = new Image();
- function anim(xp, xk, smer) {
- obj.style.left = x;
- x += step * smer;
- if (x >= (xk + xp) / 2) {
- if (smer == 1) step--;
- else step++;
- } else {
- if (smer == 1) step++;
- else step--;
- }
- if (x >= xk) {
- x = xk;
- smer = -1;
- }
- if (x <= xp) {
- x = xp;
- smer = 1;
- }
- setTimeout('anim(' + xp + ',' + xk + ',' + smer + ')', 50);
- }
- function moveLR(objID, movingarea_width, c) {
- if (navigator.appName == "Netscape") window_width = window.innerWidth;
- else window_width = document.body.offsetWidth;
- obj = document.images[objID];
- image_width = obj.width;
- x1 = obj.style.left;
- x = Number(x1.substring(0, x1.length - 2));
- if (c == 0) {
- if (movingarea_width == 0) {
- right_margin = window_width - image_width;
- anim(x, right_margin, 1);
- } else {
- right_margin = x + movingarea_width - image_width;
- if (movingarea_width < x + image_width) window.alert("No space for moving!");
- else anim(x, right_margin, 1);
- }
- } else {
- if (movingarea_width == 0) right_margin = window_width - image_width;
- else {
- x = Math.round((window_width - movingarea_width) / 2);
- right_margin = Math.round((window_width + movingarea_width) / 2) - image_width;
- }
- anim(x, right_margin, 1);
- }
- }
- //-->
- </script>
- </head>
- <body>
- <img class="img-responsive" src="/images/logo.gif" name="picture" border="0"
- data-src="">
- <script language="JavaScript">
- < !--setTimeout("moveLR('picture',300,1)", 10);
- //-->
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0705/283629.html