最新评论 - 第 55 页 - lizhenqiu blog

广西南宁市 2017-10-11 17:48

#0

阅读 2806.4万

常用html、demo代码

图片延迟加载、懒加载原理及代码实现

<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
<script>
$(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
  $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
    var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
    var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
    var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
    var halfDoc = $(window).height();//获取浏览器窗口可视高度
    var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
    var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
    if(ifElse){//如果条件成立
      setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
    }
  })//end object 'img'
})//end object window
</script>

查看文章跳到评论

广西南宁市 2017-10-11 17:41

#0

阅读 38.5万

ltrim()、rtrim()与trim()删除字符空格

为什么浏览器会自动压缩空格？
规范如此,就是这么任性https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
如果不自动压缩空格，那我们写html的时候就只能写成1行了，否则先这样的代码就会出现大段的空白。

广西南宁市2017-10-11 17:42:27

既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻不就可以了。

□ -> □
□□ -> □&nbsp;
□□□ -> □&nbsp;□
□□□□ -> □&nbsp;□&nbsp;

自动规避了浏览器的合并空格策略。

这个思路来自于富文本编辑器，

广西南宁市2017-10-11 17:43:33

word-wrap：决定句尾放不下单词时，单词是否换行
word-break: 决定单词内该怎么换行
平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
富文本采用的解决方案是对空格进行间隔html转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。

广西南宁市2017-10-11 17:44:59

white-space我们更多的时候只用到nowrap的属性，来配合实现…的特效，实际它还有更多的姿势未解锁。
white-space: normal | nowrap | pre | pre-wrap | pre-line
我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错，它就跟保留空格有关系。
pre: 保留所有的空格和回车，且不允许折行。
pre-wrap: 保留所有的空格和回车，但是允许折行。
pre-line: 会合并空格，且允许折行

广西南宁市2017-10-11 17:47:10

后台按照用户的输入的原始空格返回，不用做转义，前端加上

word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;

CSS单词换行and断词

广西南宁市2017-10-11 17:47:43

字符画很好玩，压缩空格就全乱了

查看文章跳到评论

广西南宁市 2017-10-11 16:09

#0

阅读 38.5万

ltrim()、rtrim()与trim()删除字符空格

认识word-wrap属性
[table][thead] [tr] [th]属性值[/th] [th]解释[/th] [/tr] [/thead] [tbody] [tr] [td]normal[/td] [td]使用浏览器默认的换行规则(默认)[/td] [/tr] [tr] [td]break-word[/td] [td]长单词进行换行[/td] [/tr] [/tbody][/table]

广西南宁市2017-10-11 16:10:24

word-break: break-all, 打破了浏览器的默认换行规则
word-wrap: break-word, 保留浏览器的默认换行规则，一旦一个连续长单词一行容纳不下，就只对这个长单词进行打破换行

查看文章跳到评论

广西南宁市 2017-10-11 16:07

#0

阅读 38.5万

ltrim()、rtrim()与trim()删除字符空格

认识word-break属性
[table][thead] [tr] [th]属性值[/th] [th]解释[/th] [/tr] [/thead] [tbody] [tr] [td]normal[/td] [td]使用浏览器默认的换行规则(默认)[/td] [/tr] [tr] [td]break-all[/td] [td]允许在单词内换行[/td] [/tr] [tr] [td]keep-all[/td] [td]只能在半角空格或连字符处换行[/td] [/tr] [/tbody][/table]

广西南宁市2017-10-11 16:08:26

现在大多数的浏览器默认的换行规则为半角空格和连字符,因此normal和keep-all的效果是一样的。

查看文章跳到评论

广西南宁市 2017-10-11 15:52

#0

阅读 38.5万

ltrim()、rtrim()与trim()删除字符空格

letter-spacing: normal;
text-align: justify;
word-break: break-all;
/* word-wrap: break-word; */
/* white-space: pre-wrap; */

广西南宁市2017-10-11 15:55:22

text-justify: inter-ideograph;/*IE*/

查看文章跳到评论

广西南宁市 2017-10-11 15:48

#0

阅读 38.5万

ltrim()、rtrim()与trim()删除字符空格

专业的字符画制作人员会用全角空格来做，这样就不担心浏览器的空格合并问题了

查看文章跳到评论

广西南宁市 2017-10-11 07:53

#0

阅读 1192.7万

成功的故事只能倒叙着讲

查看文章跳到评论

广西南宁市 2017-10-10 12:00

#0

阅读 95.4万

自动生成微信公众号推送文封面图片完整显示图片比例尺寸

PHP 合并图像 imagecopymerge 函数（水印制作实例）
转载地址：http://www.5idev.com/p-php_imagecopymerge.shtml

<?
header("Content-type: image/jpeg");

//原始图像
$dst = "images/flower_1.jpg";

//得到原始图片信息
$dst_im = imagecreatefromjpeg($dst);
$dst_info = getimagesize($dst);

//水印图像
$src = "images/logo.gif";
$src_im = imagecreatefromgif($src);
$src_info = getimagesize($src);	

//水印透明度
$alpha = 30;

//合并水印图片
imagecopymerge($dst_im,$src_im,$dst_info[0]-$src_info[0],$dst_info[1]-$src_info[1],0,0,$src_info[0],
$src_info[1],$alpha);

//输出合并后水印图片
imagejpeg($dst_im);
imagedestroy($dst_im);
imagedestroy($src_im);
?>

广西南宁市2017-10-10 12:00:37

php 修改图片大小

<?php
// 重置图片文件大小
function resize_image($filename, $tmpname, $xmax, $ymax)
{
    $ext = explode(".", $filename);
    $ext = $ext[count($ext)-1];
 
    if($ext == "jpg" || $ext == "jpeg")
        $im = imagecreatefromjpeg($tmpname);
    elseif($ext == "png")
        $im = imagecreatefrompng($tmpname);
    elseif($ext == "gif")
        $im = imagecreatefromgif($tmpname);
 
    $x = imagesx($im);
    $y = imagesy($im);
 
    if($x <= $xmax && $y <= $ymax)
        return $im;
 
    if($x >= $y) {
        $newx = $xmax;
        $newy = $newx * $y / $x;
    }
    else {
        $newy = $ymax;
        $newx = $x / $y * $newy;
    }
 
    $im2 = imagecreatetruecolor($newx, $newy);
    imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
    return $im2; 
}
?>

广西南宁市2017-10-10 12:01:22

PHP实例————图片等比例缩放功能

<?php
function ImageShrink($imgfile,$minx,$miny){

	//获取大图信息
	$imgarr=getimagesize($imgfile);
	$maxx=$imgarr[0];//宽
	$maxy=$imgarr[1];//长
	$maxt=$imgarr[2];//格式
	$maxm=$imgarr['mime'];//mime类型

	//大图资源
	$maxim=imagecreatefromjpeg($imgfile);

	//缩放判断
	if(($minx/$maxx)>($miny/$maxy)){
		$scale=$miny/$maxy;
	}else{
		$scale=$minx/$maxx;	
	}

	//对所求值进行取整
	$minx=floor($maxx*$scale);
	$miny=floor($maxy*$scale);
	
	//添加小图
	$minim=imagecreatetruecolor($minx,$miny);

	//缩放函数
	imagecopyresampled($minim,$maxim,0,0,0,0,$minx,$miny,$maxx,$maxy);

	//小图输出
	header("content-type:{$maxm}");

	//判断图片类型
	switch($maxt){
		case 1:
			$imgout="imagegif";
			break;
		case 2:
			$imgout="imagejpeg";
			break;
		case 3:
			$imgout="imagepng";
			break;
	}
	//变量函数
	$imgout($minim,'copypic.jpg');
	
	
	//释放资源
	imagedestroy($maxim);
	imagedestroy($minim);
}

ImageShrink("picture/apple.jpg",50,50);
?>

查看文章跳到评论

广西南宁市 2017-10-10 11:56

#0

阅读 95.4万

自动生成微信公众号推送文封面图片完整显示图片比例尺寸

芳芳造型
群发推送图文封面，生成素材上传保存永久

<?php

namespace Addons\Qunsend\Controller;
use Home\Controller\AddonsController;

class QunsendController extends AddonsController{
	function sf(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
	}
	function nconfig(){
		return getAddonConfig ( 'WeiSite' );
	}
	//预览
	function qunfasyl(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$nconfig=$this->nconfig();
		//echo $nconfig['bbyueyuesjttsyywxh'];exit;
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"'.$nconfig['bbyueyuesjttsyywxh'].'","mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );
		//dump($res['0']);
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已预览';
		M('qunsend')->where('id='.$id)->save($sav);
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//if($res['0']==0) echo '预览已经发送';
		exit;
	}
	//推送
	function qunfas(){
		//exit;
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		
		
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/sendall?access_token=' . $access_token;
		$paramStr .= '{"filter":{"is_to_all":true},"mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews","send_ignore_reprint":0}';
		$res = post_data ( $url, $paramStr );
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已经群发';
		M('qunsend')->where('id='.$id)->save($sav);
		
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//dump($res);
		exit;
	}
	function ass(){
		//获取推送文章 qunsend
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		
		$contenttop='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT7b7bBLnWcvxgWCgzpg17QRKcz8icj7vrCoHG9a6gfiabuZuOl5oeluBw/0"></p>';
		$contentbottom='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT6EiaeRoqKTA8ObByU69qNMnBibqYkjeWtThD1dUm8vAwoGuHlm6JsiaOA/0"></p>';
		
		/*$p='\618-150429120J5.gif';
		$res=$this->wximgup($p,$access_token,1);
		dump($res);
		exit;*/
		
		$s=M('custom_reply_news')->where('id='.$id)->find();
		
		
		//dump($s);exit;
		$content=$s['content'];
		preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $content, $match); 
		/*dump($match);
		exit;*/
		//重新上传文中的图片链接
		//$nimgurl=explode('<img src="',$s['content']);
		foreach($match['1'] as $k=>&$v){
			$res=$this->wximgup($v,$access_token,1);
			$content=str_ireplace($v,$res['url'],$content);
		}
		/*dump($content);
		exit;*/
		
		//$content=$s['content'];
		//$content=21321321;//str_ireplace('/Uploads/Editor/gh_c7d5c953c490/','http://ffzx.lizhenqiu.com/Uploads/Editor/gh_c7d5c953c490/',$content);
		
		//检查是否存在预推送文章
		/*$cs=M('qunsend')->where('sid='.$id)->find();
		if(empty($cs)){
			
		}else{
			exit;
		}
		//防止文章修改推送 改为使用最新 所以每次添加
		*/
		if(!$s['cover']) $path='/111111.jpg';
		else{
			$path = get_cover ( $s['cover'] );
			$path = $path['path'];
		}
		
		$nconfig=$this->nconfig();
		//900*500比例尺寸 2017.10.10
		if($nconfig['wxfmzdddd']){
			$this->getnewjjfm($path);
			$path='/12345678980.jpg';
		}
		//end
		
		//修复空封面bug
		$res=$this->wximgup($path,$access_token);
		//dump($res);
		//exit;
		$coverurl=$res['media_id'];
		//$content=$nimgurl;//$s['content'];
		//echo $content;exit;
		
			$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
			$jsonArr = array(
				"articles"=> array(
					array(
						// 我就是少了这层array 才会报empty news data 错误
						"title"=> $s['title'],
						"thumb_media_id"=> $coverurl,
						"author"=> 'XX170220',
						"digest"=> $s['intro'],
						"show_cover_pic"=> 0,
						"content"=> $contenttop.$content.$contentbottom,
						"content_source_url"=> 'http://ffzx.lizhenqiu.com/index.php?s=/addon/WeiSite/WeiSite/lastprice/sp/sp/id/'.$id.'.html',
					)
				)
			);
			$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
			$res=post_data ( $articlesurl, $json3, true );
			$media_id=$res['media_id'];
			
		/*$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );*/
		//dump($res);exit;
		
		
		$acs['sid']=$id;
		$acs['title']=$s['title'];
		$acs['ctime']=time();
		$acs['media_id']=$media_id;
		$acs['content']=$content;
		$acs['coverurl']=$coverurl;
		$cs=M('qunsend')->add($acs);
		echo $cs;
		//dump($s);
		exit;
		//echo 'fasd';
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		//$paramStr .= '{"filter":{"is_to_all":true},';
		//$paramStr .= '"text":{"content":"' . '3432423423' . '"},"msgtype":"text"}';
		
		$res=$this->get_image_media_id(740,$access_token);
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		
		
		$res = post_data ( $url, $paramStr );
		dump($res);
		//$neww=$this->get_image_media_id(625);
		//dump($neww);
		//$this->display();
	}
	//上传图片到微信
	function wximgup($path,$access_token,$u){
		$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		if(!$u) $url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		$param ['access_token'] = $access_token;
		return $res = post_data ( $url, $param, true );
	}
	
	// 新增临时图片素材
	function get_image_media_id($cover_id,$access_token) {
		$cover = get_cover ( $cover_id );
		$path = $cover ['path'];
		
		/*echo get_access_token ();exit;
		$key = 'access_token_' . get_token ();
		echo S ( $key );exit;*/
		/*$key = 'access_token_' . get_token ();
		S ( $key, 0, 7200 );*/
		//echo realpath(SITE_PATH . $path);exit;
		
		//$access_token=get_access_token ();
		//$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		$url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		
		
		$param ['access_token'] = $access_token;
		
		return $res = post_data ( $url, $param, true );
		
		//start
		$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
		//$articlesparam ['access_token'] = $access_token;
		/*$articlesparam ['articles'][0]['thumb_media_id'] = $res['media_id'];
		$articlesparam ['articles'][0]['author'] = '3432423';
		$articlesparam ['articles'][0]['title'] = 'Happy Day';
		$articlesparam ['articles'][0]['content_source_url'] = 'www.qq.com';
		$articlesparam ['articles'][0]['content'] = 'content';
		$articlesparam ['articles'][0]['digest'] = 'digest';
		$articlesparam ['articles'][0]['show_cover_pic'] = 1;*/
$jsonArr = array(
	"articles"=> array(
		array(
			// 我就是少了这层array 才会报empty news data 错误
			"title"=> 'dingdingdemo',
			"thumb_media_id"=> $res['media_id'],
			"author"=> 'martin',
			"digest"=> 'digest',
			"show_cover_pic"=> 0,
			"content"=> $content,
			"content_source_url"=> 'https://www.baidu.com/',
		)
	)
);
$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
		
		return post_data ( $articlesurl, $json3, true );
		//end
		
		return $res['media_id'];
		
		echo $path;exit;
		$driver = C ( 'PICTURE_UPLOAD_DRIVER' );
		if ($driver != 'Local' && ! file_exists ( SITE_PATH . $cover ['path'] )) { // 先把图片下载到本地
			
			$pathinfo = pathinfo ( SITE_PATH . $cover ['path'] );
			mkdirs ( $pathinfo ['dirname'] );
			
			$content = wp_file_get_contents ( $cover ['url'] );
			$res = file_put_contents ( SITE_PATH . $cover ['path'], $content );
			if (! $res) {
				return 0;
			}
		}
		$path = $cover ['path'];
		if (! $path) {
			return 0;
		}
		$param ['type'] = 'image';
		$param ['media'] = '@' . realpath ( SITE_PATH . $path );
		$url = 'https://api.weixin.qq.com/cgi-bin/media/upload?access_token=' . get_access_token ();
		$res = post_data ( $url, $param, true );
		if (isset ( $res ['errcode'] ) && $res ['errcode'] != 0) {
			return $res;
		}
		return $res ['media_id'];
	}
	
	function getnewjjfm($src){
		//原始图像
		$dst = "./a.png";
			//实测900*500比例尺寸图片已不会出现裁剪图片边缘的问题，只需要发送多图文消息时注意标题文字是否会挡住图片内容即可。
			$minx=900;
			$miny=500;

		//得到原始图片信息
		$dst_im = imagecreatefrompng($dst);
		$dst_info = getimagesize($dst);

		//水印图像
		$src = ".".$src;
		$src_im = imagecreatefromjpeg($src);
		$src_info = getimagesize($src);	

		$nx=$src_info[0];
		$ny=$src_info[1];

		if($nx>$minx || $ny>$miny){
			//获取大图信息
			$maxx=$src_info[0];//宽
			$maxy=$src_info[1];//长
			$maxt=$src_info[2];//格式
			$maxm=$src_info['mime'];//mime类型


			//缩放判断
			if(($minx/$maxx)>($miny/$maxy)){
				$scale=$miny/$maxy;
			}else{
				$scale=$minx/$maxx;	
			}

			//对所求值进行取整
			$minx=floor($maxx*$scale);
			$miny=floor($maxy*$scale);
			
			//添加小图
			$minim=imagecreatetruecolor($minx,$miny);

			//缩放函数
			imagecopyresampled($minim,$src_im,0,0,0,0,$minx,$miny,$maxx,$maxy);
			//imagejpeg($minim);
			$src_im=$minim;
			$nx=$minx;
			$ny=$miny;
		}


		//水印透明度
		$alpha = 100;

			$nwx=($dst_info[0]-$nx)/2;
			$nwy=($dst_info[1]-$ny)/2;
			

						//imagealphablending($dst_im , false);//关闭混合模式，以便透明颜色能覆盖原画板
						//imagefill($image , 0 , 0 , $bg);//填充
						imagesavealpha($dst_im , true);//设置保存PNG时保留透明通道信息
			
			
		//合并水印图片
		imagecopymerge($dst_im,$src_im,$nwx,$nwy,0,0,$nx,$ny,$alpha);

		//输出合并后水印图片
		imagepng($dst_im,'./12345678980.jpg');
		imagedestroy($dst_im);
		imagedestroy($src_im);
	}
	
}

查看文章跳到评论

广西南宁市 2017-10-10 11:40

#0

阅读 95.4万

自动生成微信公众号推送文封面图片完整显示图片比例尺寸

注意路径问题

$dst = "./a.png";
$dst = "/a.png";

查看文章跳到评论

广西南宁市 2017-10-09 17:26

#0

阅读 41.4万

PHP引用(&)使用详解

测试了下，引用很降低性能：
引用

$a = array('a','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g');
    $b = $a;
    function printArray(&$arr) //引用传递，值传递时去掉&
    {
        print(count($arr));
 
    }
    $stime=microtime(true); //获取程序开始执行的时间
     
    for($i=0;$i<=100000;$i++) {
          printArray($a);
          
    }
     echo '<br />';
    $etime=microtime(true);//获取程序执行结束的时间 
    $total=$etime-$stime;   //计算差值 
    echo $total.'秒';

0.074603080749512秒不引用
0.19360995292664秒

查看文章跳到评论

广西南宁市 2017-10-09 17:24

#0

阅读 41.4万

PHP引用(&)使用详解

不能输入test（1）是因为应该传过去地址，而数字没有地址？？

广西南宁市2017-10-09 17:25:26

1应该算是一个表达式，传递表达出会有错误提示。

查看文章跳到评论

北京市 2017-10-01 16:36

#0

阅读 2230.3万

@意见反馈/技术支持/伊网/安企网

不听成功者胡说八道，只听失败者的原因

查看文章跳到评论

广西南宁市 2017-09-30 17:05

置顶 #0

阅读 32.7万

CSS黑魔法小技巧

参考资料：
浏览器兼容
 css3美化radio单选框(兼容IE9+)
模拟光标打字
 CSS radio/checkbox单复选框元素显隐技术
 改变CSS世界纵横规则的writing-mode属性
 你不知道的CSS（三）

查看文章跳到评论

广西南宁市 2017-09-30 16:56

置顶 #0

阅读 73.3万

CSS 美化复选框CHECKBOX-无图片方式

css3美化radio单选框(兼容IE9+)

<style>.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
</style>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

广西南宁市2017-09-30 17:00:08

<style class="cp-pen-styles">.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
</style></head><body>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

广西南宁市2017-09-30 17:02:03

css3美化checkbox复选框(兼容IE9+)

<style class="cp-pen-styles">@charset "UTF-8";
.checkbox-beauty-container {
  font-size: 0;
}
.checkbox-beauty-container input[type="checkbox"]:checked + .checkbox-beauty::after {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}
.checkbox-beauty-container .checkbox-name {
  vertical-align: middle;
  font-size: 16px;
}
.checkbox-beauty-container .checkbox-beauty {
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid green;
  display: inline-block;
  margin: 0 15px 0 3px;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .checkbox-beauty:hover {
    box-shadow: 0 0 7px green;
  }
  .checkbox-beauty:hover::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green;
  }
}
</style>
<div class="checkbox-beauty-container">
   
        <span class="checkbox-name">苹果</span>
        <input type="checkbox" name="checkboxName" id="checkboxName1" hidden/>
        <label for="checkboxName1" class="checkbox-beauty"></label>
  
   
        <span class="checkbox-name">香蕉</span>
        <input type="checkbox" name="checkboxName" id="checkboxName2" hidden />
        <label for="checkboxName2" class="checkbox-beauty"></label>
   
  
        <span class="checkbox-name">橘子</span>
        <input type="checkbox" name="checkboxName" id="checkboxName3" hidden />
        <label for="checkboxName3" class="checkbox-beauty"></label>
   
</div>

查看文章跳到评论

广西南宁市 2017-09-30 16:55

置顶 #0

阅读 105.3万

js+jQuery实现网页打字机效果（带光标）js模拟光标打字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>h1{
    font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 20ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
  
  animation: typing 10s steps(20,end) 2 ,
    blink .5s step-end infinite alternate;
  
}


@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }


</style>
</head>
<body>
  <h1>This is hello world !</h1>
</body>
</html>

查看文章跳到评论

广西南宁市 2017-09-30 16:41

#0

阅读 32.7万

CSS黑魔法小技巧

补充一个用得比较少的伪元素，可以改变选择文本时高亮的样式

.container::selection {
    background: red;
}

广西南宁市2017-09-30 16:45:25

css实现两端对齐

text-align-last: justify;

广西南宁市2017-09-30 17:04:32

rem的那个应该用calc包裹一下吧，不然会报错。数据不能直接计算，要用CSS函数 calc()来帮助实现。

广西南宁市2017-09-30 17:05:01

受益很多。。。基础一般，有些看不懂。。。
另外，这个 .nav li:first-child ~ li(不包括最后一个li) 也是不包括第一个li 而且第一个的话 :first-child 好像是可以不用写的吧就是 .nav li ~ li , 作者写是考虑可读性吧

广西南宁市2017-09-30 17:05:17

text-align-last兼容性不好

查看文章跳到评论

广西南宁市 2017-09-30 16:39

#0

阅读 32.7万

CSS黑魔法小技巧

现在不加入适配 iPhone X 的代码都不潮流了啊😬😴

查看文章跳到评论

广西南宁市 2017-09-30 14:46

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
[table][tbody][tr] [th]参数[/th] [th]描述[/th] [/tr] [tr] [td]start[/td] [td]必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。[/td] [/tr] [tr] [td]end[/td] [td]可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。[/td] [/tr] [/tbody][/table]
返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
提示和注释
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

查看文章跳到评论

广西南宁市 2017-09-30 12:15

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

关于JSON.parse的深度拷贝中，Date类型也会被更改，由Date对象变为String

广西南宁市2017-09-30 12:25:50

第3条里的 "$$" 函数谁能讲解下?

IE11 里是
function(n,t){return t?t.querySelectorAll.call(t,n):window.document.querySelectorAll.apply(window.document,arguments)}

Edge里面是未定义(Microsoft Edge 41.16296.0.0)

Chrome 里

ƒ $$(selector, [startNode]) { [Command Line API] }
FF 的文档写它是 Web 开发控制台的 helper command

广西南宁市2017-09-30 12:44:10

<p style="line-height: 18px; font-size: 18px;  font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<script>
for (var line=1; line<60; line++) {
  for(var i=1;i<29;i++) {
    var s = (Math.floor((Math.random()*2)%2)) ? "╱" : "╲";
    document.write(s);
  }
  document.writeln("<br>");
}
</script>
</p>

广西南宁市2017-09-30 14:41:03

js开发实现简单贪吃蛇游戏（20行代码）

<!doctype html>
<html>
<body>
	<canvas id="can" width="400" height="400" style="background: Black"></canvas>
	<script>
		var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
		function draw(t, c) {
			ctx.fillStyle = c;
			ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
		}
		document.onkeydown = function(e) {
			fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
		};
		!function() {
			sn.unshift(n = sn[0] + fx);
			if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
				return alert("GAME OVER");
			draw(n, "Lime");
			if (n == dz) {
				while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
				draw(dz, "Yellow");
			} else
				draw(sn.pop(), "Black");
				setTimeout(arguments.callee, 130);
		}();
	</script>
</body>
</html>

广西南宁市2017-09-30 14:42:09

有一bug, dz = 370的时候，黄的吃了以后画不出来了

查看文章跳到评论

最新评论聚合