Dev Blog

스크립트 & 소스코드 공유

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

총 12건의 글

jQuery 25.06.21 조회 133

jquery.counterup - 스크롤 진입 시 숫자 카운트 애니메이션

jquery.counterup 플러그인으로 요소가 화면에 들어올 때 숫자를 카운트업하는 방법이다. waypoints와 counterup 스크립트를 로드하고 HTML에 class를 지정한 뒤 jQuery로 초기화한다. delay(카운트 지연), time(애니메이션 시간), offset(시작 시점), beginAt(시작 숫자), formatter(숫자 포맷) 등 파라미터를 설명한다.

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});

delay- 每次计数的延迟（以毫秒为单位）

time- 倒计时动画的总时长

offset- 计数器开始的视口百分位数（默认情况下为 100，这意味着它在元素进入视口的那一刻触发）

beginAt- 从其开始计数的数字

formatter- 回调函数用于格式化数字

#jquery #counterup #waypoints #counter

jQuery 25.06.21 조회 115

jQuery animate로 숫자 카운팅 업 애니메이션 만들기

jQuery의 animate 메서드로 숫자가 0부터 목표값까지 올라가는 카운팅 업 애니메이션 예제다. .count 요소마다 Counter 속성값을 요소의 텍스트까지 4초 동안 애니메이션하고, step 콜백에서 Math.ceil과 toLocaleString으로 천 단위 구분자가 있는 정수로 표시한다. HTML·CSS·JS 전체 코드를 제공한다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Number Counting Up Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
.header { margin-top: 150px; text-align: center; }
.header h1{
text-align: center;
font-size: 50px;
margin: 0;
font-family: 'Inter';
}
.counter-flex {
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
}
.counter-box {
width: 350px;
}
.counter-box h2 {
font-size: 70px;
text-align: center;
font-family: 'Inter';
margin: 0;
}
.counter-box p{
text-align: center;
font-family: arial;
}
</style>
<body>
<div class="counter-flex">
<div class="counter-box">
<h2><span class="count">7000</span></h2>
<p>
Veterans Served<br />
Annually
</p>
</div>
<div class="counter-box">
<h2><span class="count">10000</span></h2>
<p>Lorem Ipsum</p>
</div>
<div class="counter-box">
<h2><span class="count">30000</span></h2>
<p>Lorem Ipsum</p>
</div>
<div class="counter-box">
<h2><span class="count">100000</span></h2>
<p>Lorem Ipsum</p>
</div>
</div>

<script>
$(".count").each(function () {
$(this).prop("Counter", 0).animate({
Counter: $(this).text(),
},{
duration: 4000,
easing: "swing",
step: function (now) {
now = Number(Math.ceil(now)).toLocaleString('en');
$(this).text(now);
},
});
});
</script>
</body>
</html>

#jquery #counter #animate #number

jQuery 25.06.21 조회 118

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>

#jquery #counter #animation #plugin

jQuery 25.01.20 조회 139

jQuery로 텍스트 가로 스크롤 마퀴(跑马灯) 만들기

jQuery로 텍스트가 오른쪽에서 왼쪽으로 흐르는 마퀴(跑马灯) 효과를 구현하고, 마우스를 올리면 일시정지하도록 만든 예제다. HTML·CSS·JS 부분으로 나누어 구성하며, 재사용할 수 있도록 함수로 캡슐화한 코드를 제공한다. jQuery 3.3.1 기준으로 작성되었다.

因需求要做一个，横向的文字从右到左的跑马灯 ,鼠标移动上去暂停，参考其他大大的跑马灯不太适用所以，自己再次封装了一个跑马灯，分享给大家也方便自己下次直接使用，我自己用的JQ版本为3.3.1（jquery-3.3.1.min.js）
先上效果图

在这里插入图片描述

代码部分为

HTML部分

<div style="padding: 0 1rem;">
<div id="container_small_tip">
<div id="content_small_tip"></div>
</div>
</div>

CSS部分

#container_small_tip{
background:#ffffff;
position:relative;
overflow:hidden;
width:100%;
height:36px;
line-height:36px;
}
#content_small_tip{
position:absolute;
left:0;
top:0;
white-space:nowrap;
color: #EBEEF7;
}

JS部分

调用方式为

var content = "自8888年8月8日起原基础强化班和原全面提升班合并升级为全面提分班，原全面提升班和原全面提升班所剩课时在升级后的全面提分班自动顺延";
$("#content_small_tip").html(content);
roll(2,"#container_small_tip","#content_small_tip");

跑马灯函数封装为

//跑马灯插件start
function roll(speed=1,fatherselect,select){
if ($(fatherselect) == null) return;
var $container = $(fatherselect);//#container_small_tip
var $content = $(select);//#content_small_tip
var init_left = $container.width();
$content.css({ left: parseInt(init_left) + "px" });
var This = this;
var time = setInterval(function () {move($container, $content, speed); }, 20);                //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

$container.bind("mouseover", function () {
clearInterval(time);
});
$container.bind("mouseout", function () {
time = setInterval(function () {move($container, $content, speed); }, 20);
});
// setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
return this;
};
function move($container, $content, speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0) {
$content.css({ left: parseInt($content.css("left")) - speed + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
else {
$content.css({ left: parseInt(container_width) + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
}
//跑马灯插件end

#jquery #marquee #scrolling #text

JAVASCRIPT jQuery 22.02.14 조회 177

onclick(this)와 onclick(this.value) 사용법 정리

HTML 태그에서 onclick="함수(this)" 형태로 현재 요소나 값을 전달하는 방법을 정리한 글이다. this로 클릭된 요소 객체 자체를 넘기는 방식과, input 등에서 this.value로 입력된 값만 넘기는 방식의 차이를 예제 코드와 함께 설명하고, 페이지 이동이나 Ajax 실행 시 동적 파라미터를 전달하는 활용법을 소개한다.

<html>
<head>
<script language="javascript">
function test(value){
if(value=='1') {
alert("11111111");
}else{
alert("00000000");
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="radio" name="ra" value="1" onclick="test(this.value)"/>
个人
<input type="radio" name="ra" value="0" onclick="test(this.value)""/>
公司
</form>
</body>
</html>

2.onclick(this)代码详解

一般标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作，但是小编一般都会使用onclick来进行执行Ajax函数进行跳转，并同时使用onclick=”xxxxxx(this)”来传递动态参数：例子如下

JSP代码如下：

<a href="javascript:void(0);"  onclick="xxxx(this)" userId=${userId}>${userName}></a>

JSP代码如下：

function  xxxx(obj) {
var thisObj=$(obj);//js对象转jquery对象
var userId=thsiObj.attr("userId");
alert(userId);
}

#javascript #onclick #jquery #event

Let's create something great together.

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

PROJECT INQUIRY