复制代码 代码如下:

在看LABjs源代码时,发现里面有个将相对地址转为绝对地址的函数,将其拿出纪录如下:

其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家
演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果。
  这个实例的效果是点击网页上的“开始移动”按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击“停止移动”按钮就会停止移动。

var _alert_iconCss = “tipmsg_icoInfo”;
var _confirm_iconCss = “tipmsg_icoConfirm”;
var _error_iconCss = “tipmsg_icoError”;
var _warning_iconCss = “tipmsg_icoWarning”;
function dialogInit(type, msg) {
var iconCss = “”;
switch (type) {
case “confirm” : iconCss = _confirm_iconCss; break;
case “error” : iconCss = _error_iconCss; break;
case “warning” : iconCss = _warning_iconCss; break;
default : iconCss = _alert_iconCss; break;
}

复制代码 代码如下:

复制代码 代码如下:

var htmlStr = “<div id='” + type + “Div’ style=’display:
none;’><p><span class='” + iconCss + “‘ style=’float:left;
margin:0 7px 50px 0;width:35px;height:35px;’></span>” + msg +
“</p></div>”;
return htmlStr;
}
function Alert(msg, okCallback) {
var title = “提示”;
var type = “alert”;
var html = dialogInit(type, msg);
var div = $(“body”).find(“#”+type+”Div”);
div.remove();
$(‘body’).append($(html));

function canonical_uri(src, base_path)
{
var root_page = /^[^?#]*\//.exec(location.href)[0],
root_domain = /^\w+\:\/\/\/?[^\/]+/.exec(root_page)[0],
absolute_regex = /^\w+\:\/\//;

  <html>
  <head>
  <title>JavaScript Motion Sample</title>
  <script language=”JavaScript”>
  var movingID = null;
  var scrolling = false;
  function startMove()
  {
   var left = eval(div1.style.left.replace(“px”, “”));
   if (left < document.body.scrollWidth – 150)
    div1.style.left = left + 1;
   else
    div1.style.left = 10;
   movingID = setTimeout(“startMove()”, 10);
  }
  function stopMove()
  {
   clearTimeout(movingID);
  }
  </script>
</head>
  <body>
  <div id=”div1″ style=”visibility:visible; position:absolute;
left:10; top:10; z-index:1;”>
   <table bgColor=”#FFFFCC” border=”1″cellPadding=”0″
cellSpacing=”0″>
    <tr>
     <td>I can moving…</td>
    </tr>
   </table>
  </div>
  <br><br>
  <input type=”button” value=”开始移动” onClick=”startMove()”>
  <input type=”button” value=”停止移动” onClick=”stopMove()”>
   </body>
  </html>

var buttons = {“确定” : function () {
if(okCallback) okCallback();
$(this).dialog(“close”);
}
};

// is `src` is protocol-relative (begins with // or ///), prepend
protocol
if (/^\/\/\/?/.test(src))
{
src = location.protocol + src;
}
// is `src` page-relative? (not an absolute URL, and not a
domain-relative path, beginning with /)
else if (!absolute_regex.test(src) && src.charAt(0) != “/”)
{
// prepend `base_path`, if any
src = (base_path || “”) + src;
}

  这里主要使用了一个叫setTimeout(function,
interval)函数,这个函数的参数格式为:
  第一个参数“function”为超时后调用的函数名,第二个参数“interval”为超时值,以微秒为单位。
  注意一点是如果要停止这个计时器,必须保存调用这个setTimeout()函数后的返回值,通过clearTimeout(id)函数来取消计时器。

$(“#”+type+”Div”).dialog({
modal : true,
title : title,
buttons : buttons
});
}
function Confirm(msg, okCallback, cancelCallback) {
var title = “确认”;
var type = “confirm”;
var html = dialogInit(type, msg);
var div = $(“body”).find(“#”+type+”Div”);
div.remove();
$(‘body’).append($(html));

// make sure to return `src` as absolute
return absolute_regex.test(src) ? src : ((src.charAt(0) == “/” ?
root_domain : root_page) + src);
}

演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三…

var buttons = {“确定” : function () {
if(okCallback) okCallback();
$(this).dialog(“close”);
},
“取消” : function () {
if(cancelCallback) cancelCallback();
$(this).dialog(“close”);
}
};
$(“#”+type+”Div”).dialog({
modal : true,
title : title,
buttons : buttons
});
}
function Error(msg, okCallback) {
var title = “错误”;
var type = “error”;
var html = dialogInit(type, msg);
var div = $(“body”).find(“#”+type+”Div”);
div.remove();
$(‘body’).append($(html));

如当前页面地址为:
则canonical_uri(“scy.js”)返回

发表评论

电子邮件地址不会被公开。 必填项已用*标注