前端技术

延时弹出层控制

Posted in 前端技术 on 三月 1st, 2011 by admin – Be the first to comment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>延时弹出层控制</title>
        <script type="text/javascript">
            var isPopLayer = false;
	    var time = null;
            //打开弹出层
            function poplay(){
                if(!isPopLayer){
                    //延迟1秒显示层
		    time = setTimeout(function(){
                        document.getElementById('poplay').style.display = 'block';
			clplay();
                        isPopLayer = true;
                    }, 1000);
                }
            }

	    //鼠标移走时执行
	    function clplay(){
		clearTimeout(time);
		time = null;
	    }

            //关闭弹出层
            function poclose(){
                document.getElementById('poplay').style.display = 'none';
                isPopLayer = false;
            }
        </script>

        <style type="text/css">
            #poplay{ padding:1em; position:absolute; border: 3px solid #000; display:none;}
        </style>
</head>
<body>
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字1</a> 这个都是胡乱写的
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字2</a> 这个都是胡乱写的
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字3</a> 这个都是胡乱写的
        <div id="poplay">
            <p class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <button onclick="poclose()">关闭</button>
        </div>
</body>
</html>

关于网站后台缩略图综合解决方法

Posted in 前端技术, 后端技术, 开源 on 一月 17th, 2011 by admin – Be the first to comment

这两天给一个iphone 的应用程序写支持数据时遇到的关于缩略图的问题!
写出来分享一下. 直接上代码.

我们要达到这样的效果!

功能点
1. 图片上传的格式与大小尺寸是变化的,所以我们需要一个程序来实缩略图(php)
2. 常用的功能封装成jquery插件形式来使用。

html结构代码

编号 标题 来源 日期 缩略图
12 为什么是黄小明' 新浪 2011-01-15 upload/thumbnail/2011/01/15/1295081305.jpg
11 测度2730211069556' 新浪 2011-01-15 upload/thumbnail/2011/01/15/1295095094.jpg
编号 标题 来源 日期 缩略图

jquery插件代码

(function($){
    /**
     * 显示缩略图插件
     * 接收缩略图php地址
     * @author  mark.chen maxtank@gmail.com www.simcn.com
     * @date 2011-1-17
     **/
    $.fn.thumb = function(thumb){
        $(this).hover(function(){
            var url = $(this).text();
            var isAppend = $(this).find('span')[0];
            if(!isAppend){
                $(this).append($(''));
            }else{
                $(this).find('span').show();
            }
            //console.log("url的值为: %s", url);
        },
        function(){
            $(this).find('span').hide();
        });
    }
})(jQuery);

//使用方法
//$('.pw').thumb('thumb.php');

php生成缩略图代码(部分代码来源于互联网,也不知道是谁发表的)

/**
 * 生成缩略图
 * http://www.simcn.com
 * @param $_GET['f'] 图片地址
 * @param $_GET['w'] 图片宽度 默认为200
 * @param $_GET['h'] 图片高度 默认为200
 * @author mark.chen maxtank@gmail.com
 * @version 1.0
 **/

ini_set('memory_limit', '-1');

//传入参数
$width  = isset($_GET['w']) ? intval($_GET['w']) : '200' ;
$height = isset($_GET['h']) ? intval($_GET['h']) : '200' ;
$f		= trim($_GET['f']);

if(empty($f)){
	exit('需要传入f');
}

$info_orig = getimagesize($f);
$width_orig  = $info_orig[0];
$height_orig = $info_orig[1];

header('Content-type: '.$info_orig['mime']);
//header('Content-type: image/jpeg');
//header('Content-type: image/png');

$ratio_orig = $width_orig/$height_orig;
if($width/$height > $ratio_orig) {
   $width_ = $width;
   $width = $height*$ratio_orig;
   $pos_x = intval(($width_ - $width)/2); //位移X轴
   $pos_y = 0;
} else {
   $height_ = $height;
   $height = $width/$ratio_orig;
   $pos_x = 0;
   $pos_y = intval(($height_ - $height)/2); //位移Y轴
}

// 建立画布
$im = imagecreatetruecolor(200, 200);
$color = imagecolorallocate($im, 255, 255, 255);
imagefill($im, 0, 0, $color);		//填充背景为白色
//imagecolortransparent($im,$color);	//将背景透明化

switch($info_orig['mime']){
	case 'image/jpeg':
		$image  = imagecreatefromjpeg($f);
		imagecopyresampled($im, $image, $pos_x, $pos_y, 0, 0, $width, $height, $width_orig, $height_orig);
		imagejpeg($im, null, 100);
		break;
	case 'image/png':
		$image  = imagecreatefrompng($f);
		imagecopyresampled($im, $image, $pos_x, $pos_y, 0, 0, $width, $height, $width_orig, $height_orig);
		imagepng( $im );
		break;
	case 'image/gif':
		$image  = imagecreatefromgif($f);
		imagecopyresampled($im, $image, $pos_x, $pos_y, 0, 0, $width, $height, $width_orig, $height_orig);
		imagegif($im, null, 100);
		break;
}

直接使用网页进行打印

Posted in 前端技术 on 九月 14th, 2010 by admin – Be the first to comment

网页打印内容有很多便利的地方,而且不需要安装其他软件

会打印机页眉与页脚并且在有些在程序中不好去掉.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css" media="print">
		*{margin:0; padding:0;}
		p{ background-color:#333; color:#fff; margin:1mm;}
		.page-break-after{page-break-after : always}
		button{display:none;}
	</style>
	<script type="text/javascript">
	function webprint(){
		window.print();
	}
	</script>
</head>
<body>
	<p>1</p>
	<div class="page-break-after">&nbsp;</div>
	<p>2</p>
	<div class="page-break-after">&nbsp;</div>
	<p>3</p>
	<button onclick="webprint()">print</button>

</body>
</html>

通过script标签增加JS

Posted in 前端技术 on 二月 21st, 2010 by admin – Be the first to comment

工作需要在前端的代码通过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')

数组随机排序

Posted in 前端技术 on 九月 10th, 2009 by admin – Be the first to comment
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());

    JavaScript中confirm的用法

    Posted in 前端技术 on 十二月 19th, 2008 by admin – Be the first to comment

    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;
    

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

    Posted in 前端技术 on 十二月 12th, 2008 by admin – Be the first to comment

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

    <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>

    javascript与php类型转换

    Posted in 前端技术, 后端技术 on 十一月 27th, 2008 by admin – Be the first to comment

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

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

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

    Posted in 前端技术 on 十一月 22nd, 2008 by admin – Be the first to comment

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

    代码如下

    
    
    
    

    简约视界|www.simcn.com

    图文并排(固定度宽)

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

    图文绕排(固定度宽)

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

    图文并排(不固定宽度)

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

    min-height属性在ie6下表现

    Posted in 前端技术 on 十一月 14th, 2008 by admin – Be the first to comment
    selector {
      min-height:500px;
      height:auto !important;
      height:500px;
    }
    /*另一种*/
    selector {
      min-height:500px;
      _height:500px;
    }
    

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