马克的足迹! html, javascript, css, php, python develop and design

21二/10

通过script标签增加JS

工作需要在前端的代码通过xxx.js?m=m&x=x 的方法来通过js加载JS文件。



    
        
        
    
    
     

JS:

//MS闭包,不让代码互相影响,我也用的不多
(function(){

	var simcn = {
		src:[],
		init:function(){
			var __g = document.getElementById('simcnworkframe');
			this.srcUrl(__g.src);
		},
		run:function(){
			this.init();
			var head = document.getElementsByTagName('head')[0];
			var j=0;
			for(i in this.src){
				var t = document.createElement('script');
				t.src = this.src[i] + '.js' ;
				t.id  = "simc_" + this.src[i];
				head.appendChild(t);
			}
		},
		srcUrl:function(_u){
			var jl = _u.split('.js?')[1].split('&');
			for(i in jl){
				this.src.push(jl[i].split('=')[1]);
			}
		}
	};	

	simcn.run();

})()

//m.js
alert('m.js')

//c.js
alert('c.js')

//v.js
alert('v.js')
10九/09

数组随机排序

var wangwangList = ['咨询online','咨询online1','咨询online2','咨询online3']; 

	/**
	 * 随机排预
	 * @param 旺旺名字列表
	 * @returns HTML代码
	 **/
	function randomWangWang(A){
	    var B,C;
	    var X = [];
	    var j=0;
	    for(i=A.length;i>=1;i--){
		C=Math.floor(Math.random() * A.length);
		X[j] = outWangWangCode(A[C]);
		A.splice(C,1)
		j++;
	    }
	    return X
	}

	/**
	 * 转化为HTML链接形式
	 * @param 旺旺名字
	 * @returns HTML代码
	 **/
	function outWangWangCode(n){
	    var _n = encodeURIComponent(n);
	    var html='';
	    html += '
  • '; html += '点击这里给我发消息'+n+'
  • '; return html; } /** * 转出全部列表 * @param 写模式还是返回模式 * @returns HTML代码 **/ function writeWangWangHTML(write){ var html = '
      '; var x = randomWangWang(wangwangList); for(i in x ){ html += x[i]; } html += '
    '; return html; } //显示码 document.write(writeWangWangHTML());
    19十二/08

    JavaScript中confirm的用法

    configrm 用于删除或者其他时提示返回 t , f

    	if(window.confirm("确定删除吗?")){
    		$.get("../member/action.php?act=del", { snapID: id},
    		   function(data){
    				if(data==1){
    					alert('success');
    					removeNode1(obj.parentNode.parentNode);
    				}else{
    					alert('error');
    				}
    		   }
    		);
    	}
    	return false;
    
    12十二/08

    动态给ifram添加内容,兼容ie和FF

    第一次知道,还可以这样写

    <iframe width='100%' height='100%' name='boot' id='boot' src='' frameborder='0' scrolling='no'></iframe>
    <SCRIPT   LANGUAGE="JavaScript">  
    <!--  
    var iframe = window.frames['boot'];
    iframe.document.open();
    iframe.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n');
    iframe.document.write('<html xmlns="http://www.w3.org/1999/xhtml">\n');
    iframe.document.write('<head>\n');
    iframe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />\n');
    iframe.document.write('</head>\n');
    iframe.document.write('<body>\n');
    iframe.document.write('请等待...');
    iframe.document.write('</body>\n');
    iframe.document.write('</html>\n');
    iframe.document.close();
    //-->  
    </SCRIPT>

    27十一/08

    javascript与php类型转换

    1. 字符串转换为整型
    //php
    intval(); //php
    floatval();//php浮点
    strval();

    //javascript
    toString(); //转化为整型
    parseInt(); //js 转化为整型
    parseFloat(); //转化为浮点
    Number(); //js, 这个会自动转

    22十一/08

    两种常用的图文排版实现(CSS)

    一般的图文排版方式有两种,
    1. 图文并排
    2. 图文绕排

    代码如下

    
    
    
    

    简约视界|www.simcn.com

    图文并排(固定度宽)

    image 生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....

    图文绕排(固定度宽)

    image 生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....

    图文并排(不固定宽度)

    image 生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....生活中,无数的物品正随着时光的流逝而变旧,破损,数不清的财富在不经意间消失,杨欣的发家史是一个不为人知的秘密,化腐朽为神奇这种事情,就算他不隐瞒,别人也不会相信。   一个生活在大都市的拾荒者,为了自己的梦想和家人而不断打拼,从社会的最底层,逐步走上巅峰,当金钱,荣誉,美女接踵而至,他能否把....

    具体例子可以查看这里
    http://www.simcn.com/max/1.html

    14十一/08

    min-height属性在ie6下表现

    selector {
      min-height:500px;
      height:auto !important;
      height:500px;
    }
    /*另一种*/
    selector {
      min-height:500px;
      _height:500px;
    }
    

    ie6 的 height 属性具有像 min-height的功能 也就是说当内容高度比较 height高是会扩展开

    13十一/08

    各种图片与内容展示(lightbox)实现

    Thickbox - 基于 jQuery,支持 AJAX,轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k,目前还可作为 WordPress 的插件使用。

    GreyBox - 创建 iframe 的弹出界面,可使用图片、HTML 及 URL,大小约为 20k。

    GreyBox Redux - 基于 jQuery,比 GreyBox 更轻。

    Lightbox v2.0 - 最初是为了显示图片设计的,使用了 prototype 和 sciptaculous,所以有些沉重,但对于图片来说很好用。

    Lightbox with moo.fx - 基于 prototype,但只能用于图片。

    Lightbox Gone Wild
    - modal 模式窗口的 lightbox,可使用 html、表单及图片,也是基于 prototype 的,所以有一些 heavy。

    Multi-faceted LIghtbox - 又一个基于 prototype 的,不过这个为各种可用于 lightbox 的数据类型提供了选项。

    Leightbox - 和 Lightbox Gone Wild 很相似,只是 Leightbox 以 html 方式存放内容,所以可以被搜索引擎索引到。

    xilinus - 使用简单,基于 prototype,很容易定制,可使用多种内容选项。

    Lightbox Plus - 可以自动根据窗口的大小缩放图片。

    Suckerfish Hover Lighbox - 和传统的 lightbox 不一样,它在打开 lightbox 的时候,还可以点击访问页面上的其它元素。

    Litebox - 这是 Lightbox 的另一个版本,代码量减少了,使用了 moo.fx 和 prototype-lite,如果页面需要减肥的话,可以选择这个。

    LITBox - 使用类写的 lightbox,所以可以创建多个对象实例,并且单独进行控制。基于 Thickbox。

    31十/08

    基于jquery图片轮播广告

    1. 需要引用 jquery库

    
    

    2. 样式表

    body{ padding:0px; margin:0px; }
    #Carousel_Frame img{border:0;}
    #Carousel_Frame{width: 450px; height:332px; text-align:left; overflow:hidden; border:0px solid #000; position:absolute; }
    #Carousel_list{ width: 450px; height:332px; } /* 图片大小 */
    #Carousel_list a{ display: block;}
    #Carousel_Thumbnails { width: 450px;  HEIGHT: 56px;  position:absolute; z-index:2; top:270px; left:10px;}
    #Carousel_Thumbnails ul{ filter: Alpha(Opacity=30); opacity: 0.8; padding:0px; margin:0px;}
    #Carousel_Thumbnails ul li { float: left;  width: 50px;  position:relative; CURSOR: pointer;  HEIGHT: 50px;  BORDER: 3px solid #fff; margin-right:3px;}
    #Carousel_Thumbnails ul li img{ width:50px; height:50px;}
    
    
    
    
    
    31十/08

    div实现table左下对齐功能

    如题:

                   
     
       下一页