这篇文章主要介绍了 js 实现交换运动效果的方法, 涉及 javascript 操作页面元素与相关样式实现交换运动效果的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现交换运动效果的方法。分享给大家供大家参考。具体分析如下:
实现后的效果,点击互相交换位置和距离左边和上角的信息。
要点一:
- var now = s_pic_li[0];
- for (var i = 0; i < s_pic_li.length; i++) {
- s_pic_li[i].onclick = function() {
- if (this == now) return false;
- var w = now.offsetWidth;
- var h = now.offsetHeight;
- var l = now.offsetLeft;
- var t = now.offsetTop;
- var w1 = this.offsetWidth;
- var h1 = this.offsetHeight;
- var l1 = this.offsetLeft;
- var t1 = this.offsetTop;
- startrun(now, {
- width: w1,
- height: h1,
- left: l1,
- top: t1
- });
- startrun(this, {
- width: w,
- height: h,
- left: l,
- top: t
- });
- now = this;
- }
- }
循环给每一块加点击事件,获取交换双方的信息,然后执行运动函数,相关信息做为参数。
最后,上代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gb2312" />
- <title>
- 无标题文档
- </title>
- <style>
- <!-- body,ul,li{margin:0; padding:0; font:18px/1.5 arial; color:#333;}
- #big_pic{width:500px; height:400px; background:#ccc; text-align:center;
- position:absolute;} #s_pic li{float:left; width:100px; height:80px; display:inline;
- background:#06c; text-align:center; position:absolute; top:310px;} -->
- </style>
- <script>
- < !--window.onload = function() {
- var s_pic = document.getElementById("s_pic");
- var s_pic_li = s_pic.getElementsByTagName("li");
- var now = s_pic_li[0];
- for (var i = 0; i < s_pic_li.length; i++) {
- s_pic_li[i].onclick = function() {
- if (this == now) return false;
- var w = now.offsetWidth;
- var h = now.offsetHeight;
- var l = now.offsetLeft;
- var t = now.offsetTop;
- var w1 = this.offsetWidth;
- var h1 = this.offsetHeight;
- var l1 = this.offsetLeft;
- var t1 = this.offsetTop;
- startrun(now, {
- width: w1,
- height: h1,
- left: l1,
- top: t1
- });
- startrun(this, {
- width: w,
- height: h,
- left: l,
- top: t
- });
- now = this;
- }
- }
- }
- function getstyle(obj, name) {
- if (obj.currentStyle) {
- return obj.currentStyle[name];
- } else {
- return getComputedStyle(obj, false)[name];
- }
- }
- function startrun(obj, json, fn) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- var isall = true;
- for (var attr in json) {
- var cur = 0;
- if (attr == "opacity") {
- cur = Math.round(parseFloat(getstyle(obj, attr)) * 100);
- } else {
- cur = parseInt(getstyle(obj, attr));
- }
- var speed = (json[attr] - cur) / 8 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if (cur != json[attr]) {
- isall = false;
- }
- if (attr == "opacity") {
- obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
- obj.style.opacity = (cur + speed) / 100;
- } else {
- obj.style[attr] = cur + speed + "px";
- }
- }
- if (isall) {
- clearInterval(obj.timer);
- if (fn) {
- fn();
- }
- }
- },
- 30);
- }
- //-->
- </script>
- </head>
- <body>
- <ul id="s_pic">
- <li style="left:0; top:0; width:400px; height:300px">
- 0
- </div>
- <li style="left:0;">
- 1
- </li>
- <li style="left:110px;">
- 2
- </li>
- <li style="left:220px;">
- 3
- </li>
- <li style="left:330px;">
- 4
- </li>
- </ul>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: