前端之路 » 前端技术 http://www.simcn.com 网站开发, 前端开发, 高性能前端开发 Thu, 03 Nov 2011 02:08:49 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 延时弹出层控制 http://www.simcn.com/%e5%bb%b6%e6%97%b6%e5%bc%b9%e5%87%ba%e5%b1%82%e6%8e%a7%e5%88%b6 http://www.simcn.com/%e5%bb%b6%e6%97%b6%e5%bc%b9%e5%87%ba%e5%b1%82%e6%8e%a7%e5%88%b6#comments Tue, 01 Mar 2011 02:14:05 +0000 admin http://www.simcn.com/?p=390 <!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> ]]> http://www.simcn.com/%e5%bb%b6%e6%97%b6%e5%bc%b9%e5%87%ba%e5%b1%82%e6%8e%a7%e5%88%b6/feed 0 关于网站后台缩略图综合解决方法 http://www.simcn.com/site_admin_thumbnail_php http://www.simcn.com/site_admin_thumbnail_php#comments Mon, 17 Jan 2011 07:00:06 +0000 admin http://www.simcn.com/?p=357 这两天给一个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;
}
]]> http://www.simcn.com/site_admin_thumbnail_php/feed 0 直接使用网页进行打印 http://www.simcn.com/web-print_js-print_css-print http://www.simcn.com/web-print_js-print_css-print#comments Tue, 14 Sep 2010 08:03:53 +0000 admin http://www.simcn.com/?p=311 网页打印内容有很多便利的地方，而且不需要安装其他软件

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

<!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>
]]> http://www.simcn.com/web-print_js-print_css-print/feed 0 通过script标签增加JS http://www.simcn.com/script_src_add_script_js http://www.simcn.com/script_src_add_script_js#comments Sun, 21 Feb 2010 10:48:21 +0000 admin http://www.simcn.com/?p=253 工作需要在前端的代码通过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')
]]> http://www.simcn.com/script_src_add_script_js/feed 0 数组随机排序 http://www.simcn.com/array-random-sort http://www.simcn.com/array-random-sort#comments Thu, 10 Sep 2009 00:51:02 +0000 admin http://www.simcn.com/?p=199 =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=''; [...]]]> 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()); ]]>     http://www.simcn.com/array-random-sort/feed 0     JavaScript中confirm的用法 http://www.simcn.com/javascript%e4%b8%adconfirm%e7%9a%84%e7%94%a8%e6%b3%95 http://www.simcn.com/javascript%e4%b8%adconfirm%e7%9a%84%e7%94%a8%e6%b3%95#comments Fri, 19 Dec 2008 08:00:22 +0000 admin http://www.simcn.com/?p=115 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;
    ]]>     http://www.simcn.com/javascript%e4%b8%adconfirm%e7%9a%84%e7%94%a8%e6%b3%95/feed 0     动态给ifram添加内容,兼容ie和FF http://www.simcn.com/%e5%8a%a8%e6%80%81%e7%bb%99ifram%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9%e5%85%bc%e5%ae%b9ie%e5%92%8cff http://www.simcn.com/%e5%8a%a8%e6%80%81%e7%bb%99ifram%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9%e5%85%bc%e5%ae%b9ie%e5%92%8cff#comments Fri, 12 Dec 2008 01:42:48 +0000 admin http://www.simcn.com/?p=110 第一次知道,还可以这样写

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

    ]]>     http://www.simcn.com/%e5%8a%a8%e6%80%81%e7%bb%99ifram%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9%e5%85%bc%e5%ae%b9ie%e5%92%8cff/feed 0     javascript与php类型转换 http://www.simcn.com/javascript%e4%b8%8ephp%e7%b1%bb%e5%9e%8b%e8%bd%ac%e6%8d%a2 http://www.simcn.com/javascript%e4%b8%8ephp%e7%b1%bb%e5%9e%8b%e8%bd%ac%e6%8d%a2#comments Thu, 27 Nov 2008 01:32:24 +0000 admin http://www.simcn.com/?p=106 1. 字符串转换为整型
    //php
    intval(); //php
    floatval();//php浮点
    strval();

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

    ]]>     http://www.simcn.com/javascript%e4%b8%8ephp%e7%b1%bb%e5%9e%8b%e8%bd%ac%e6%8d%a2/feed 0     两种常用的图文排版实现(CSS) http://www.simcn.com/two-text-pic http://www.simcn.com/two-text-pic#comments Sat, 22 Nov 2008 03:20:27 +0000 admin http://www.simcn.com/?p=93 一般的图文排版方式有两种,
    1. 图文并排
    2. 图文绕排

    代码如下

    

    

    简约视界|www.simcn.com
    

    图文并排(固定度宽)
    

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

    图文绕排(固定度宽)
    

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

    图文并排(不固定宽度)
    

    image 生活中，无数的物品正随着时光的流逝而变旧，破损，数不清的财富在不经意间消失，杨欣的发家史是一个不为人知的秘密，化腐朽为神奇这种事情，就算他不隐瞒，别人也不会相信。
　　一个生活在大都市的拾荒者，为了自己的梦想和家人而不断打拼，从社会的最底层，逐步走上巅峰，当金钱，荣誉，美女接踵而至，他能否把....生活中，无数的物品正随着时光的流逝而变旧，破损，数不清的财富在不经意间消失，杨欣的发家史是一个不为人知的秘密，化腐朽为神奇这种事情，就算他不隐瞒，别人也不会相信。
　　一个生活在大都市的拾荒者，为了自己的梦想和家人而不断打拼，从社会的最底层，逐步走上巅峰，当金钱，荣誉，美女接踵而至，他能否把....生活中，无数的物品正随着时光的流逝而变旧，破损，数不清的财富在不经意间消失，杨欣的发家史是一个不为人知的秘密，化腐朽为神奇这种事情，就算他不隐瞒，别人也不会相信。
　　一个生活在大都市的拾荒者，为了自己的梦想和家人而不断打拼，从社会的最底层，逐步走上巅峰，当金钱，荣誉，美女接踵而至，他能否把....生活中，无数的物品正随着时光的流逝而变旧，破损，数不清的财富在不经意间消失，杨欣的发家史是一个不为人知的秘密，化腐朽为神奇这种事情，就算他不隐瞒，别人也不会相信。
　　一个生活在大都市的拾荒者，为了自己的梦想和家人而不断打拼，从社会的最底层，逐步走上巅峰，当金钱，荣誉，美女接踵而至，他能否把....
    ]]>     http://www.simcn.com/two-text-pic/feed 0     min-height属性在ie6下表现 http://www.simcn.com/min-height-ie6 http://www.simcn.com/min-height-ie6#comments Fri, 14 Nov 2008 07:06:07 +0000 admin http://www.simcn.com/?p=80 selector { min-height:500px; height:auto !important; height:500px; } /*另一种*/ selector { min-height:500px; _height:500px; }

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

    ]]>     http://www.simcn.com/min-height-ie6/feed 0