본문 바로가기
728x90
반응형

javascript/jQuery30

[jQuery]이미지 마우스 올린부분만 선명하게 보기 (특정부위만 확대) 이미지를 두개를 겹쳐둔 후 하나는 배경처럼 이용하고, 하나는 clip-path를 이용해 이미지의 특정 부위만 보이도록한다. 보여질 위치는 mousemove 이벤트를 이용해 이미지 위에서 움지이는 마우스를 감지해 event.offsetX와 event.offsetY 현재 영역에서의 마우스 위치를 찾아 값을 지정해준다. See the Pen img hover by gahyun (@gahyun) on CodePen. clip-path를 이용한 또다른 효과 [CSS/CSS 응용] - [css]이미지 가운데부터 커지면서 보이기 2019. 6. 5.
[jQuery 플러그인]원형차트그리기 jquery-circle-progress 사용법 http://kottenator.github.io/jquery-circle-progress/ jquery-circle-progress - jQuery Plugin to draw animated circular progress bars no animation animation progress value progress custom angle, value update image fill, custom sizes Download version 1.2.2 bower install jquery-circle-progress npm install jquery-circle-progress kottenator.github.io 1. 기본설정값 $('.chart1').circleProgress({ size:200, //그.. 2019. 6. 5.
[jQuery]input 태그에 하이라이트 라인 추가하기 아래 input 태그안에 텍스트를 입력해 보세요. See the Pen input by gahyun (@gahyun) on CodePen. 2019. 6. 3.
[jQuery]마우스 움직임에 따라 이미지 위치 변경 mousemove이벤트를 등록해 "background-position": -e.pageX+"px "+ -e.pageY+"px" 현재 마우스 위치로 배경이미지 포지션을 지정해준다. See the Pen VOgPxw by gahyun (@gahyun) on CodePen. 2019. 6. 3.
728x90
반응형