Anymoore

标签： js

  • 用anyjs实现简单的LightBox效果

    anyjs是自己正在筹备的一个轻量级js库，主要为了提高平时开发效率，目前只封装了一些开发过程中常用到的事件方法以及DOM操作，当然bug还很多，希望高手指教，不胜感激，SVN地址：http://anyjs.googlecode.com/svn/trunk/
    下面是在校毕业生专题中实现lightbox效果的代码，兼容目前主流的FF/Chrome/IE6+，效果简单基础，如果看起来比较乱，希望见谅。
    01 <script>
    02 window.onload=function(){
    03 $(“img”).each(function(i){
    04 $(i).click(function(){
    05
    06 /* y=$.create(“div”);
    07 $(y).set(“id”,”bglay”).set(“class”,”bglay”);
    08 $(“body”).ist(y);
    09 x=$.create(“div”);
    10 $(x).set(“id”,”ajax”);
    11 $(x).set(“class”,”ajax”); */
    12
    13 $(“#bglay”).show();
    14 $(“#ajax”).show().h(“<img src=’images/load.gif’ /> 正在加载….”);
    15 var anyimg=new Image();
    16 anyimg.src=$(i).get(“src”);
    17 anyimg.onload=function(){$(“#ajax”).h(“<img src=’”+anyimg.src+“‘ alt=’点击关闭’ width=’500′  border=’0’/>”);}
    18
    19 return false;
    20 });
    21 });
    22
    23 $(“#ajax”).click(function(){$(“#bglay”,“#ajax”).hide();});
    24 }
    25 </script>
    26 <style>
    27 *{margin:0;padding:0;}
    28 #ajax{
    29 position:fixed;
    30 _position:absolute;
    31 left:50%;
    32 top:100px;
    33 _top:expression(document.documentElement.scrollTop+100+“px”);
    34 width:500px;
    35 margin-left:-250px;
    36 border:2px solid #ccc;
    37 color:#696969;
    38 z-index:99;
    39 background-color:#fff;
    40 display:none;
    41 }
    42 #bglay{
    43 position:fixed;
    44 _position:absolute;/*ie6*/
    45 z-index:2;
    46 overflow:hidden;
    47 top:0px;
    48 left:0px;
    49 width:100%;
    50 height:100%;
    51 background:#000;
    52 opacity:0.7;
    53 filter: Alpha(opacity=70);
    54 display:none;
    55 }
    56 </style>
     
    有时间再陆续将几个常用web2.0效果实现，放在这当做学习笔记吧。

  • 双击实现文本元素修改

    此效果多应用于后台栏目名称修改上，双击以创建input元素，onblur事件实现异步调用无刷新提交。

    JS部分：

    <code><script type=”text/javascript”>
    function showInput(element)
    {
    var defaultValue = element.innerHTML;   //取得默认内容
    var inputEle= document.createElement(‘input’);   //创建input元素
    inputEle.type = ‘text’;   //添加类型
    inputEle.value=defaultValue;
    inputEle.className=”tip”;
    element.innerHTML = ”;
    element.appendChild(inputEle);   //添加子元素
    inputEle.focus();   //获得焦点
    inputEle.onfocus = function()
    {
    element.ondblclick=”;//取消元素的双击事件
    }
    inputEle.onblur = function()
    {
    element.innerHTML = this.value ? this.value : defaultValue;   //触发时判断值是否为空
    var any= $(this).attr(‘value’);
    $.ajax({
    type: “POST”,
    url: “insert.php”,
    data: “name=”+ any,
    success: function(){
    $(“#show”).prepend(“<li>提交成功：”+any+”</li>”);
    $(“#show li:first”).fadeIn(“slow”);
    }
    });
    element.ondblclick = function()//还原
    {
    showInput(this);
    }
    }
    }
    </script></code>

    样式：

    <style type=”text/css” media=”all”>
    #show{
    margin-top:100px;
    width:300px;
    height:200px;
    border:1px solid #F5F5F5;
    overflow:hidden;
    }
    #show li{
    background:#FDF5E6;
    list-style:none;
    }
    .tip{
    border:2px solid #FDF5E6;
    }
    </style>

    HTML部分：

    <span>双击下面文字：</span>  <br /><br />
    <span ondblclick=”showInput(this)” >天道酬勤</span> <br />
    <div id=”show”></div>

    注意，该效果的实现用到了jQuery,请在HTML头部包含之。

    点击预览效果.