标签为‘js’的日志

用anyjs实现简单的LightBox效果

日期 : 2010年05月23日分类 : 代码作者 : 没有评论

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效果实现，放在这当做学习笔记吧。

Tags : , ,

双击实现文本元素修改

日期 : 2009年07月30日分类 : 代码, 作品作者 : 没有评论

此效果多应用于后台栏目名称修改上，双击以创建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头部包含之。

点击预览效果.

Tags : , , , ,