본문 바로가기

코딩/JAVASCRIPT

(15)
bxslider 탭에서 auto 롤링 오류날때 $(function(){ var settings = function() { var settingOff = { slideWidth: 680, mode: 'vertical', infiniteLoop:true, minSlides:8, maxSlides:8, moveSlides:1, controls:false, slideMargin:7, pager: false, auto: false } var settingOn = { slideWidth: 680, mode: 'vertical', infiniteLoop:true, minSlides:8, maxSlides:8, moveSlides:1, controls:false, slideMargin:7, pager: false, auto: true, pause: 1000 } /..
부드러운 트윈맥스 버튼 움직임 function hexagon_motion(){ $('.box_hexagon a').on('mouseenter',function(){ var $button = $(this).find('.hexagon_figure, .space_img, .hexagon_btn'); var duration = 0.4; var delay = 0.12; TweenMax.to($button, duration, {scaleY: 1.1, ease: Expo.easeOut}); TweenMax.to($button, duration, {scaleX: 1.1, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay}); TweenMax.to($button, duration * 1.25..
swiper centeredSlides error swiper centeredSlides 사용시 페이지 리로드는 괜찮지만 resize시엔 가운데가 잘 안맞는 경우가 있다. 이 땐 spaceBetween 으로 인해 오류가 생기는거라 spaceBetween을 0으로 수정하고 각 slide에 margin으로 간격 주면 해결~!
[Jquery] 텍스트 말줄임 스크립트 https://cccat.tistory.com/32 [J-query/css] 길어진 텍스트 말줄임 스크립트로 처리하기 문장이 길면 뒤에 ...표시가 되도록 주로 css로 처리를 한다. 부득이하게 안먹히는 경우도 있고, 원하는대로 처리가 되지 않는 경우가 많기 때문에 스크립트로 처리 할 경우도 생긴다. css로 처리할 경우 div {tex.. cccat.tistory.com https://jsfiddle.net/4dxy5rez/5/ Edit fiddle - JSFiddle jsfiddle.net
카카오 지도 API 간단 사용법 https://developers.kakao.com/apps 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 다음 지도API가 카카오 지도API 로 변경 위 사이트로 이동하여 앱 만들기 -> 생성된 앱 이동시 상세정보 나옴 -> 앱정보 : 플랫폼 통해 설정시 키 발급 http://apis.map.kakao.com/ 카카오 API 해당파트를 선택해서 가이드 라인에 따라 생성 DEMO, WIZARD 통해 기본 생성 가능하다.
select box 커스텀 및 값 가져오기
이벤트 중첩 막기 (바인딩 해제) 제이쿼리를 사용하다보면 이벤트 부여로 on을 쓰는 경우가 많다.이전에는 bind를 사용하였으나, 이벤트 작성 후 바인딩 해제하기 편리하여 on으로 많이 사용하는 편. $(element).on('event', function(){~~~}); -> $(element).off('event'); off()로 쓰면 해당 엘리먼트 이벤트 전체 해제,off('event')로 쓰면 해당 이벤트만 해제
자바스크립트 클래스를 정의하는 3가지 방법 자바스크립트 클래스를 정의하는 3가지 방법 소개 자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다. 먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만 일반적으로 자바스크립트는 클래스가 없는 언어이다. 자바스크립트에서 모든것은 객체이다. 그리고 상속은 객체가 객체로 부터 상속을 받지, 다른 클래스가 있는 언어들처럼 클래스가 클래스로부터 상속받지 않는다. 1. 함수 이용하기 가장 많은 쓰는 방법중 하나다. 평범한 자바스크립트 함수를 만든 다음 new 키워드로 객체를 생성하..
[입문] TWEENMAX 트윈맥스 배우기 4 - easing easing은 jQuery Animation에서 볼수 있는 메소드이다.easing Function은 매개변수의 변화율을 시간이 지남에 따라 정하는 것으로,지정한 값의 속도로 움직이게 된다. * easing 종류 트윈맥스는 이 easing을 쉽게 구현하기 위한 페이지가 있으므로 하단 링크를 통해예시, 실행을 해본 뒤 코드를 복사해서 지정을 하면 된다. https://greensock.com/docs/Easing * 그래프형태 * 시계형태 * 박스형태
[입문] TWEENMAX 트윈맥스 배우기 3 - 변수 기본 구문// TweenMax.to(target:Object, duration:Number, variables:Object):TweenMax target : Object - 오브젝트 duration : Number - tween 시간 /(초) variables : Object - 객체의 모든 속성 VARIABLES delay : Number - 지연시간 ease : Function - 따로 ease 클래스는 없나 봅니다. 상단에 fl.motion.easing.*; 한줄 추가 해주시고 Tween Class처럼 쓰면 됩니다. Default-Regular.easeOut easeParams : Array - 직접 ease을 만들어서 쓸수 있습니다. 방정식이 있겠죠? 전 패스;;; autoAlpha : Numbe..