실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 9건의 글
CSS border-image 속성으로 이미지를 이용한 테두리를 만드는 CodePen 예제다. border-image-source에 이미지 URL을 지정하고 border-image-slice 값으로 9슬라이스 영역을 나누면, 이미지가 요소 테두리 전체에 자연스럽게 늘어나며 모서리와 변이 각각 다른 방식으로 표시된다.
See the Pen border-image by H J (@H-J-the-typescripter) on CodePen.
이미지 주변으로 텍스트가 자연스럽게 흐르도록 배치하는 CSS float 예제다. 이미지에 float: left나 right를 적용하고 margin으로 여백을 조절하면, 본문 텍스트가 이미지 옆과 아래를 감싸는 신문 기사 형태의 레이아웃이 만들어진다. 동작을 확인할 수 있는 CodePen 데모를 포함한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
CSS 的 mix-blend-mode 与 background-blend-mode 实现图片与背景合成的方法。整理了 multiply(正片叠底)、screen(滤色)、overlay(叠加)、darken、lighten、difference、hue、saturation 等全部混合模式，并说明 mix-blend-mode 作用于 img 元素、background-blend-mode 作用于 div 背景，两者使用场景不同。
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原
这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。
background-blend-mode: multiply;是div属性，mix-blend-mode: multiply; 是img的属性，两个东西有差别
PHP의 imagick 확장을 이용해 JPG·PNG 이미지를 WEBP 형식으로 변환하는 방법이다. GitHub에서 제공하는 확장을 설치하고 변환 예제 코드를 사용한다. 단일 CGI 프로세스로 수만 번 변환해도 메모리가 늘지 않아 안정적이며, 200KB 이하 이미지는 약 0.2초 안에 변환되지만 대용량 파일은 시간이 오래 걸려 실시간 변환에는 부적합하다.
imagemagick支持webp，使用imagick即可，不需编写此扩展 下载地址 https://github.com/godlovesdog/webp 使用
/*
* 将JPEG/PNG 图片内存转为webp
* 纯内存操作
*/
$opts = getopt('f:');
$blob = file_get_contents("/home/lvbenwei/".$opts['f']);
$res = image2webp($blob);
$arr = explode('/',$opts['f']);
file_put_contents("/home/lvbenwei/".$arr[count($arr)-1].".webp",$res);//纯内存操作单CGI进程几万次JPEG图片转WEBP操作，消耗内存并未增长，可以认为无内存泄露 JPEG转webp
php 把jpg格式的图片转为webp格式
图片字节数在200KB以内时，图片格式转换耗时基本在0.2s内
图片字节数>200KB时，格式转换耗时不稳定，有时达近10s PNG转WEBP
php 把jpg格式的图片转为webp格式
有的200KB以内的PNG转换webp耗时竟达1s
格式转换性能不尽如人意，不建议进行在线格式转换
이미지가 많아 페이지 로딩이 느려질 때, 스크롤을 내리면 화면에 들어오는 이미지만 순서대로 표시되도록 하는 jQuery 레이지로드 예제다. 이미지의 original 속성에 실제 경로를 저장해 두고 scroll 이벤트에서 화면 진입 여부를 판단해 src를 교체한 뒤 fadeIn으로 표시한다. CSS와 HTML 예제도 함께 제공한다.
根据滚动条下拉而延迟加载显示图片特效，通过jquery来实现这个图片延迟加载显示特效，当用户下拉滚动条时才加载图片。
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var $winH = $(window).height();
var $img = $("#show img");
var $imgH = parseInt($img.height()/2);
var $srcDef = "/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif";
runing();
$(window).scroll(function(){
runing();
})
function runing(){
$img.each(function(i){
var $src = $img.eq(i).attr("original");
var $scroTop = $img.eq(i).offset();
if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
{
if($img.eq(i).attr("src") == $srcDef){
$img.eq(i).hide();
}
$img.eq(i).attr("src",function(){return $src}).fadeIn(300);
}
})
}
})
</script>*{ border:0;}
a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}<div id="show">
<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
</div>프로젝트 문의 및 견적 요청은 언제든 환영합니다.