Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

4건의 글

jQuery Incremental Counter - 숫자가 올라가는 카운터 예제

jquery.incremental-counter 플러그인을 이용해 숫자가 점점 올라가는 애니메이션 카운터를 만드는 예제다. jQuery와 플러그인 파일을 로드하고, .incremental-counter 요소에 data-value 속성으로 목표 숫자를 지정한 뒤 incrementalCounter()를 호출하면 페이지 진입 시 숫자가 증가하며 표시된다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Incremental Counter Plugin Demo</title>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.incremental-counter.js"></script>

<style>
body { background-color:#384047;}
.container { margin:150px auto; max-width:500px; text-align:center}
h1 { margin-bottom:30px; color:#fff; text-align:center;}
.incremental-counter{margin:1%}
.incremental-counter .num {
background: #eee;
border: 1px solid #fff;
border-radius: 4px;
color: #384047;
display: inline-block;
height: 64px;
line-height: 62px;
margin: 0 4.5px;
position: relative;
text-align: center;
top: -1px;
width: 50px;
font-size: 45px;
font-size: 3.72625em;
font-weight: 700;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
background: #384047;
content: "";
display: block;
height: 1px;
left: -1px;
margin: -0.5px 0 0;
position: absolute;
right: -1px;
top: 50%;
width: auto;
}
</style>
</head>

<body>

<div class="container">
<div class="incremental-counter" data-value="55650"></div>
<div class="incremental-counter" data-value="360"></div>
<div class="incremental-counter" data-value="36200"></div>
</div>
<script>
$(".incremental-counter").incrementalCounter();
</script>

</body>
</html>

Swiper5/Swiper4 자주 쓰이는 옵션 정리 (roundLengths, parallax, center…

Swiper 슬라이더에서 자주 쓰이지 않지만 필요할 때 유용한 옵션들을 정리한 글이다. roundLengths(너비 반올림), grabCursor(손 모양 커서), parallax(시차), autoHeight(자동 높이), nested(중첩 슬라이더), watchOverflow, preloadImages, centeredSlides, slidesPerGroup, slidesPerColumn, simulateTouch 등 옵션별 설명과 사용 예제 코드를 담고 있다.

不常用但偶尔必要的选项

roundLengths

如果设置为true,则将slide的宽和高取整(四舍五入),以防止某些分辨率的屏幕上文字或边界(border)模糊。

例如当你设定slidesPerView : 3时,则可能出现slide的宽度为341.33px,开启roundLengths后宽度取整数341px。

var mySwiper = new Swiper('.swiper-container',{
roundLengths : true,
})

grabCursor

该选项给Swiper用户提供小小的贴心应用,设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)

var mySwiper = new Swiper('.swiper-container',{
grabCursor : true,
})

parallax

设置为true开启Swiper的视差效果,内容在切换时更有层次感。

效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1

<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
<div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
<p>从右边300px开始进入,时间600ms</p>
</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
<div data-swiper-parallax-scale="0.15" >缩放变化</div>
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true,
})
</script>

autoHeight

自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。

var swiper = new Swiper('.swiper-container', {
autoHeight: true, //高度随内容变化
});

nested

用于嵌套相同方向的swiper时,当切换到子swiper时停止父swiper的切换。

请将子swiper的nested设置为true。

由于需要在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效。

var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})

watchOverflow

当没有足够的slide切换时,例如只有1个slide,swiper会失效且隐藏导航等。默认不开启这个功能。

loop模式无效,因为会复制slide。

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
watchOverflow: true,//因为仅有1个slide,swiper无效
navigation: {
nextEl: '.swiper-button-next',//自动隐藏
prevEl: '.swiper-button-prev',//自动隐藏
},
pagination: {
el: '.swiper-pagination',//自动隐藏
},
scrollbar: {
el: '.swiper-scrollbar',//自动隐藏
},
})
</scrip>

preloadImages

默认为true,Swiper会强制加载所有图片后才初始化。

var mySwiper = new Swiper('.swiper-container',{
preloadImages:false,
})

updateOnImagesReady

当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true

var mySwiper = new Swiper('.swiper-container',{
updateOnImagesReady : true,
})

centeredSlides

设定为true时,active slide会居中,而不是默认状态下的居左。

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>

centeredSlidesBounds

当设置了Active Slide居中后,还可以配合设置此参数,使得第一个和最后一个Slide 始终贴合边缘。

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
centeredSlidesBounds: true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>

slidesPerGroup

在carousel mode下定义slides的数量多少为一组。

var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
slidesPerGroup : 3,
})

slidesPerColumn

设置多行布局里面每列的slide数量。

当slidesPerColumnFill:column,需要同时设定swiper-container的高度。

slidesPerColumn目前还不兼容loop模式(loop: true)。

在slide数量不足以填满的情况下可能会出现布局不理想(例如4行3列,但是只有10个slide),建议使用空的slide将数量补足。

var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,//一行显示3个
slidesPerColumn: 2,//显示2行
})

slidesPerColumnFill

多行布局中以什么形式填充

var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,
slidesPerColumn : 2,
slidesPerColumnFill : 'row',
})

slidesOffsetBefore

设定slide与左边框的预设偏移量(单位px)。

var mySwiper = new Swiper('.swiper-container',{
slidesOffsetBefore : 100,
})

slidesOffsetAfter

设定slide与右边框的预设偏移量(单位px)。

var mySwiper = new Swiper('.swiper-container',{
slidesOffsetAfter : 100,
})

simulateTouch

鼠标模拟手机触摸。默认为true,Swiper接受鼠标点击、拖动。

var mySwiper = new Swiper('.swiper-container',{
simulateTouch : false,//禁止鼠标模拟
})

jQuery BlackAndWhite 플러그인으로 이미지 흑백 효과 적용하기

jQuery.BlackAndWhite 플러그인을 이용해 이미지에 흑백 효과를 적용하는 방법을 4단계로 설명한다. jQuery와 플러그인 스크립트를 로드하고, 흑백 처리할 이미지의 래퍼에 bwWrapper 클래스를 지정한 뒤 CSS로 래퍼 스타일을 설정하고, window load 시점에 플러그인을 초기화한다. hoverEffect, intensity, responsive, speed 등 주요 옵션도 소개한다.

1 add jQuery and plug in to the page

<script src="js/jquery.min.js"></script>
<script src="js/jQuery.BlackAndWhite.js"></script>

2 add this class to the wrapper of the image that you want make in Black and White

<div class="bwWrapper">
<img src="path/to/your/image" width="image width" height="image height">
</div>

3 set the wrapper in this way from the css:

.bwWrapper {
position:relative;
display:block;
}

4 initialize the plug in on window load (no $(document).ready()) :

$(window).load(function(){
$('.bwWrapper').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
}
});
});

jQuery 이미지 확대 플러그인 ckshow_Img 1.6 사용법

jQuery 기반 이미지 확대 플러그인 ckshow_Img 1.6의 사용법이다. img 태그에 기본 이미지 경로(src)와 확대 이미지 경로(osrc)를 지정하고 class를 ckshow_Img로 설정하면, 마우스를 올렸을 때 확대 이미지가 크게 표시되는 방식으로 동작한다. 예제 이미지와 적용 방법이 함께 정리되어 있다.

<img src="图片路径" osrc="放大图片路径" class="ckshow_Img">


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.