评论 - lizhenqiu blog

#⁶²⁸

作者：广西南宁市

两个常用的rem布局方式

关于rem
这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。
比如我们设置body，html的字体大小为10px；那么1rem就是10px,
这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。
1.手机淘宝一直用的方法：思路是通过js动态的获取设备的DPR（设备像素比），根据dpr来改变标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>

Run code

Cut to clipboard

中的属性值；

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';


window.dpr = dpr;
window.rem = rem;

Run code

Cut to clipboard

此时在dpr=2时1rem=75px;
所以如果我们要设置div的宽度为750px;(注：750px,为设计稿中div的宽度)就要写为：width：750/75*1rem;

最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375px，就刚刚好。
如果设置的值不是好算的数字，比如123px,那就很蛋疼了
为了减少计算，在less中可以定义以下函数

.change_val(@name, @px){
    @{name}: @px / 75 * 1rem;
}

Run code

Cut to clipboard

这样在less中就可以写为

.container{ 
　　.change_val (width,123); //123是设计稿原值 
　　.unchanged_val(font-size,100)
}

Run code

Cut to clipboard

另：在设计中我们一般希望font-size一直固定不变对此：

.unchanged_val(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px /*3 / 2) * 1px
  }
  [data-dpr="3.5"] & {
      @{name}: round(@px * 3.5 / 2) * 1px;
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}

Run code

Cut to clipboard

2.我们可以以iphone6（375*667）设计稿为原型：

设置css

html {
  font-size: calc(100vw/3.75);
}

Run code

Cut to clipboard

这个意思就是设置 html的font-size为100px;

因为这样写比较方便，比如在写一个div宽度为75px时，直接定义width：0.75rem;就可以了
为了避免calc()的兼容性问题，可以加上如下js；

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';

Run code

Cut to clipboard

文章：关于像素的相关知识移动web开发之像素和DPR 发表时间：2018-02-06, 15:02:19

展开↯

#⁶²⁹

作者：广西南宁市

Javascript获取屏幕的分辨率（PPI/DPI）
获取PPI：

<script>function js_getDPI() {
    var arrDPI = new Array;
    if (window.screen.deviceXDPI) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);    
    }
    return arrDPI;
}
window.onload=function(){
		alert("当前屏幕PPI "+js_getDPI());
}</script>

Run code

Cut to clipboard

文章：关于像素的相关知识移动web开发之像素和DPR 发表时间：2018-02-06, 14:57:39

展开↯

#⁶³⁰

作者：广西南宁市

border 1px 问题

　　　　由于最小的物理像素差异，一条直线的显示，iphone5它能显示的最小宽度其实是理论上说的0.5px。
　　　　不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理
　　　　通常是给元素order-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

Run code

Cut to clipboard

#,广西南宁市,2018-02-06,14:56:13,
通常我们在写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素，
比如在iPhone6上，我们写的20px字体世界上在视觉效应上有20px;
所以当我们写1px边框时，在手机上看起来会变粗变为2px；

文章：关于像素的相关知识移动web开发之像素和DPR 发表时间：2018-02-06, 14:55:36

展开↯

#⁶³¹

作者：广西南宁市

非常清晰，我的理解DPR就是CSS里设定的尺寸与显示在真机上的，现在很多手机都是自己默认的DPR，比如ip6plus的DPR是3.0，我们写css的时候，宽度和高度是100px，显示在ip6plus上的时候就是300px

文章：关于像素的相关知识移动web开发之像素和DPR 发表时间：2018-02-06, 14:53:31

展开↯

#⁶³²

作者：广西南宁市

手机小图标

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC

Run code

Cut to clipboard

文章：苹果手机alert弹框对话框自定义窗口去掉域名英文标题文字发表时间：2018-02-06, 14:35:34

展开↯

#⁶³³

作者：广西南宁市

自定义右键菜单

<body>

<script>//requestAnimationFrame兼容写法
if(!window.requestAnimationFrame){
    var lastTime = 0;
    window.requestAnimationFrame = function(callback){
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0,16.7-(currTime - lastTime));
        var id  = window.setTimeout(function(){
            callback(currTime + timeToCall);
        },timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    }
}
if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}

//事件处理程序兼容写法
function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}

/*******生成元素*******/
var list = document.createElement('ul');
list.id = 'list';
list.innerHTML = '<li id="menuTop">回到顶部</li>\
	<li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\
	<li id="menuCommand">评论</li>';
document.body.appendChild(list);

/*******添加样式**********/
function loadStyles(str){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.innerHTML = str;
    }catch(ex){
        style.styleSheet.cssText = str;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style); 
}

loadStyles("#list{margin: 0!important;\
	padding: 0!important;\
	width: 120px;\
	text-align: center;\
	cursor: pointer;\
	font:20px/40px  '宋体';\
	background-color: #eee;\
	position:fixed;\
	display:none;}\
	#list li{list-style:none!important;}\
#list li:hover{background-color: lightblue;color: white;font-weight:bold;}");        


//DOM结构稳定后，再操作
addEvent(window,'load', contextMenuLoad);

function contextMenuLoad(){

	/********显示和隐藏菜单***********/
	addEvent(document,'click',function(){
		list.style.display = 'none';
	})
	//右键点击时，菜单显示
	document.oncontextmenu = function(e){
		e = e || event;
		//通常情况下，菜单的位置就是鼠标的位置
		list.style.left = e.clientX + 'px';
		list.style.top = e.clientY + 'px';
		//当鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置
		if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){
			list.style.top = e.clientY - list.offsetHeight + 'px';
		}
		//当鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧
		if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
			list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';
		}
		list.style.display = 'block';
		//点击右键的同时按下ctrl键，那么将显示默认右键菜单
		if(e.ctrlKey){
			list.style.display = 'none';
		//如果只是点击右键，则显示自定义菜单
		}else{
			return false;
		}		
	}	

	/*********回到顶部功能*********/
	var timer  = null;	
	menuTop.onclick = function(){
	    cancelAnimationFrame(timer);
	    //获取当前毫秒数
    	var startTime = +new Date(); 
    	//获取当前页面的滚动高度
    	var b = document.body.scrollTop || document.documentElement.scrollTop;
    	var d = 500;
    	var c = b; 
	    timer = requestAnimationFrame(function func(){
	    	var t = d - Math.max(0,startTime - (+new Date()) + d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
        timer = requestAnimationFrame(func);
        if(t == d){
          cancelAnimationFrame(timer);
        } 
	    });
	};

	/*********点赞功能**********/
	//模拟原始点赞按钮的点击事件
	var digg = document.getElementById('div_digg');
	if(digg){
		menuFavour.onclick = digg.children[0].onclick;			
	}
	//获取赞成数的函数
	function getfavourNum(){
		if(digg){
			favourNum.innerHTML = digg.children[0].children[0].innerHTML;
		}			
	}
	//页面载入时获取赞成数
	getfavourNum();
	if(menuFavour.addEventListener){
		menuFavour.addEventListener('click',function(){
			setTimeout(function(){
				getfavourNum();
			},2000);
		})	
	}else{
		menuFavour.attachEvent('onclick',function(){
			setTimeout(function(){
				getfavourNum();
			},2000);
		})		
	}

	/*********评论功能*********/
	menuCommand.onclick = function(){
		document.getElementById('comment_form_container').scrollIntoView();
	}
}	</script></body>

Run code

Cut to clipboard

文章：JS鼠标右键事件发表时间：2018-02-06, 14:33:28

展开↯

#⁶³⁴

作者：广西南宁市

canvasTime.js 炫彩时钟时间彩色

<div style="width:300px;">
	<canvas id="canvas" style="width:100%;" height="100" width="700">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){ 

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;  
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);        

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);    
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }        
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化 
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }    
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;    
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }                
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);            
                }
            }
        }    
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }        
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();                
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}
    
})();



 </script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-02-06, 14:29:51

展开↯

#⁶³⁵

作者：河南省郑州市

呃，试了试似乎有点东西不能用

某些元素样式引用了.LESS的样式文件

一样的代码我的就是不引用这个less文件。。

很奇怪。

文章：WeUI微信小程序前端框架ui简明入门指南发表时间：2018-02-04, 22:40:25

展开↯

#⁶³⁶

作者：广西南宁市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-02-02, 10:51:20

展开↯

#⁶³⁷

作者：广西南宁市

LOVE U ,BUT MORE THAN I COULD SAY IT .LET IT BE.

#,广西南宁市,2018-02-01,11:38:57, 自从“野食蛮族”广东，到“险诈诡乡”河南，终于“枯萎之土”东北也加入豪华套餐了～

#,广西南宁市,2018-02-01,11:42:42,

#,广西南宁市,2018-02-01,11:42:55,

#,广西南宁市,2018-02-01,11:54:06, 我小学开始看毛片，但是却初中才知道几个洞，大学才开始撸管。。

#,广西南宁市,2018-02-01,11:58:57, 贪晚蓝月，介是你没见过的船新版板。19：48分，不要错过。

#,广西南宁市,2018-02-01,12:00:57,

文章：2018年的第一次清零发表时间：2018-02-01, 10:00:14

展开↯

#⁶³⁸

作者：广西南宁市

模仿微信相册图片放大
点击图片放大缩放
弹出层
相册


<!--zoom img-->
<style>
#newBridge{
z-index: 2147483645!important;
}
#zoomimgggxxxlll{
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2147483646;
	display:none;
}
.layui-layer, .layui-layer-shade{
z-index: 2147483647!important;
}
</style>
<div id="zoomimgggxxxlll" onclick="layer.closeAll();$('#zoomimgggxxxlll').hide();"></div>
<script src="/layer/layer.js"></script>
<script type="text/javascript" src="/m/js/pinchzoom.js?1"></script>

<script>
$(function () {
	$('.layui-layer-content').each(function () {
		new RTP.PinchZoom($(this), {});
	});
})


$(document).ready(function(){
  $(".cnnn img").click(function(){
		layer.closeAll();
		$('#zoomimgggxxxlll').show();
		var srccc=$(this).attr('src');
		srccc='<img onclick="layer.closeAll();$(\'#zoomimgggxxxlll\').hide();" src="'+srccc+'" style="max-width:100%;max-height:100%;"/>'
		//alert(srccc);
		//页面层
		layer.open({
		  type: 1,scrollbar: false,
		  title: false,
		  closeBtn: 0,
		  shade: 0,
		  //area: ['100%', '100%'],
		  content: srccc
		});
		
	$('.layui-layer-content').each(function () {
		new RTP.PinchZoom($(this), {});
	});
		
		
  });
  /*$(".layui-layer-content img").on("click",function(){
  //$(".layui-layer-content img").click(function(){
		layer.closeAll();
  });*/
  
  
  });
</script>
<!--end-->

Run code

Cut to clipboard

#,广西南宁市,2018-01-31,00:32:46, 附件下载

#,广西南宁市,2018-01-31,00:33:31, 图片缩放大


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Pinchzoom.js Demo</title>

    <style type="text/css">
        div.pinch-zoom,
        div.pinch-zoom img{
            width: 100%;
            -webkit-user-drag: none;
        }

    </style>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- pinchzoom requires: jquery -->
    <script type="text/javascript" src="../dependencies/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../src/pinchzoom.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>
</head>
<body>

    <div class="page">
        <div class="pinch-zoom">
            <div class="description">
                <h1>Pinchzoom.js</h1>
                <p>
                    Multi-touch zoom in Javascript
                </p>
            </div>
            <img src="frog.jpg"/>
           
        </div>
    </div>

</body>
</html>

Run code

Cut to clipboard

-webkit-user-drag

#,广西南宁市,2018-01-31,00:34:41, jQuery动画出现连续触发、滞后反复执行的解决方法

//语法结构 
$("#div").stop();//停止当前动画，继续下一个动画 
$("#div").stop(true);//清除元素的所有动画 
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

Run code

Cut to clipboard

$("#div").stop().animate({width:"100px"},100);

Run code

Cut to clipboard

#,广西南宁市,2018-01-31,10:59:47,
修复uc等浏览器图片max不显示问题

area: ['100%'],

Run code

Cut to clipboard

加加载层，会导致点击遮罩层不能关闭bug

//layer.load(1);

Run code

Cut to clipboard

#,广西南宁市,2018-01-31,11:52:58,
修复有点击a标签链接图片不放大

if($(this).parent('a').length) return true;//修复链接图片也放大

Run code

Cut to clipboard

文章：鼠标图片放大插件-JQUERY ZOOM 发表时间：2018-01-31, 00:28:22

展开↯

#⁶³⁹

作者：广西南宁市

weiphp ueditor 百度编辑器上传图片自动压缩最大宽高度900bug

#,广西南宁市,2017-06-14,16:34:05, UEditor上传图片被压缩得模糊的解决方法
UEditor功能很强大，但是有个很不友好的功能：会在使用UEditor上传图片时，如果你的原始图片尺寸过大，就会先自动对图片大小进行压缩，然后将压缩的文件给servlet。也就是说，使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊，而这是在用户毫不知情的情况下进行的操作，非常讨厌。
如果不想让上传的精美照片被UEditor 压缩得面目全非，可以通过以下方法禁止UEditor自动压缩图片：
打开该目录的文件：UEditor\php\ue.config.php，

#,广西南宁市,2017-06-14,16:46:37, image.html无效，需修改

#,广西南宁市,2017-06-14,16:47:45,@2,

ueditor.config.js 143行

Run code

Cut to clipboard

#,广西南宁市,2018-01-30,10:19:25,@2,
修改前

修改后

#,广西南宁市,2018-01-30,19:37:09,
新后台修改

\app\system\include\public\js\examples\editor\ueditor\third-party\webuploader

Run code

Cut to clipboard

{if(d=c.canvasToDataUrl(b,"image/jpeg",e.quality),e.preserveHeaders&&this._metas&&this._metas.imageHead)return d=c.dataURL2ArrayBuffer(d),d=c.updateImageHead(d,this._metas.imageHead),d=c.arrayBufferToBlob(d,a)}else d=c.canvasToDataUrl(b,a);d=c.dataURL2Blob(d)}return d},getAsDataUrl:function(

Run code

Cut to clipboard

#,广西南宁市,2018-01-30,19:38:29,
UEditor上传图片被压缩得模糊的解决方法

UEditor功能很强大，但是有个很不友好的功能：会在使用UEditor上传图片时，如果你的原始图片尺寸过大，就会先自动对图片大小进行压缩，然后将压缩的文件给servlet。也就是说，使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊，而这是在用户毫不知情的情况下进行的操作，非常讨厌。
如果不想让上传的精美照片被UEditor 压缩得面目全非，可以通过以下方法禁止UEditor自动压缩图片：
打开该目录的文件：UEditor\php\ue.config.php，找到如下代码：

$CONFIG = array(
    /* 上传图片配置项 */
    "imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName" => "upfile", /* 提交的图片表单名称 */
    "imageMaxSize" => $max_size, /* 上传大小限制，单位B */
    "imageAllowFiles" => $upload_allow, /* 上传图片格式显示 */
    "imageCompressEnable" => true, /* 是否压缩图片,默认是true */
    "imageCompressBorder" => 2940, /* 图片压缩最长边限制 */
    "imageInsertAlign" => "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix" => "", /* 图片访问路径前缀 */

将上述代码中imageCompressEnable 后的“true”参数改为“false”即可。当然，你也可以调整imageCompressBorder 后的参数，只有边长大于该值的照片才会被UEditor 压缩。

如果你觉得压缩图片的功能还是有点用，将下面这个目录中的文件 “UEditor\dialogs\image\image.js”中 "quality" 值调整为100 （代码瑞安），这样会对图片质量有一些改善，但还是差强人意，所以还是建议禁止UEditor 自动压缩图片。
compress: editor.getOpt('imageCompressEnable') ? {
                    width: imageCompressBorder,
                    height: imageCompressBorder,
                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 90,
                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,
                    // 是否允许裁剪。
                    crop: false,
                    // 是否保留头部meta信息。

Run code

Cut to clipboard

quality

Run code

Cut to clipboard

文章：weiphp微信框架耗时卡慢解决办法发表时间：2017-06-14, 16:32:58

展开↯

#⁶⁴⁰

作者：广西南宁市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-30, 11:04:39

展开↯

#⁶⁴¹

作者：广西南宁市

文章：截止2017年底，从腾讯离职的员工有2万多名，创业项目近1000个发表时间：2018-01-29, 14:31:38

展开↯

#⁶⁴²

作者：广西南宁市

//js 创建cookie
function xlmsetCookie(c_name,value,expiredays){
	var exdate=new Date()
	exdate.setDate(exdate.getDate()+expiredays)
	document.cookie=c_name+ "=" +escape(value)+
	((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+";path=/"; //js cookie根目录
}

Run code

Cut to clipboard

//js 获取cookie
function xlmgetCookie(c_name){
	if (document.cookie.length>0)
	  {
	  c_start=document.cookie.indexOf(c_name + "=")
	  if (c_start!=-1)
		{ 
		c_start=c_start + c_name.length+1 
		c_end=document.cookie.indexOf(";",c_start)
		if (c_end==-1) c_end=document.cookie.length
		return unescape(document.cookie.substring(c_start,c_end))
		} 
	  }
	return ""
}

Run code

Cut to clipboard

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-26, 11:56:13

展开↯

#⁶⁴³

作者：广西南宁市

<html>中<textarea>在显示时开头的空格

<label class="regboxlabe">
备注：
</label>
<textarea rows="3" cols="25" name="pi.pi_message">
</textarea>

Run code

Cut to clipboard

这样显示出来开头就会有很多空格，但是如果给<textarea>放在一行显示出来的数据开头就没有空格。如：

<textarea rows="3" cols="25" name="pi.pi_message"></textarea>

Run code

Cut to clipboard

不知道为什么！

#,广西南宁市,2018-01-25,10:11:18,

		<div class="editor">
		<script>
		var editor = editor('content');
		document.write (editor);
		</script>
		<div class="editor_text">
		    <textarea name='content' id='content' style="height: 366px;">
			
<?=$article['content']?>

</textarea>
		 </div>
	    </div>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-22, 14:17:44

展开↯

#⁶⁴⁴

作者：广西南宁市

一流的企业，和不入流的企业，区别很大，一个不入流的企业怎么想扣员工的钱，经营理念不一样，

文章：截止2017年底，从腾讯离职的员工有2万多名，创业项目近1000个发表时间：2018-01-25, 09:43:44

展开↯

#⁶⁴⁵

作者：广西南宁市

搜索输入框点击空白不能自动隐藏小键盘

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-25, 03:16:00

展开↯

#⁶⁴⁶

作者：广西南宁市

thinkphp or 复合查询组合查找 and 条件查询 like

$where['name']  = array('like', '%thinkphp%');
$where['title']  = array('like','%thinkphp%');
$where['_logic'] = 'or';
$map['_complex'] = $where;
$map['id']  = array('gt',1);

Run code

Cut to clipboard

查询条件是

( id > 1) AND ( ( name like '%thinkphp%') OR ( title like '%thinkphp%') )

Run code

Cut to clipboard

	//获取文章列表
	public function new_list($classname,$cid,$p,$m,$img,$k,$hyid){
		
		
		$where[$classname]=$cid;
		$where['hyfl']=array('like','%,'.$cid.',%');
		$where['_logic'] = 'or';
		$w['_complex'] = $where;
		
		if($img) $w['imgurl']=array('neq','');
		if($k) $w['title']=array('like','%'.$k.'%');
		if($hyid) $w['gz_headeryjhhyy']=$hyid;
		
		$w['displaytype']=1;
		$p=$p+0;
		if($p<0) $p=0;
		$n=$p*$m;
		if($p>0) $n=($p-1)*$m;
		//dump($w);exit;
		$l=M('news')->where($w)->order('com_ok desc,no_order asc,id desc')->limit($n,$m)->select();
	//print_r($l);exit();
		return $l;
	}

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-25, 00:35:18

展开↯

Records:2796 34/148 «‹30 31 32 33 34 35 36 37 38 ›»