JS & jQuery
javascript , jquery 에 대한 기록반응형
JS & jQuery
modal
#modal See the Pen Untitled by Kim Mi Seon (@miseon920) on CodePen. *클릭해보세요! #modal 플러그인_bPopup $('.imagebtn').click (function(){ var ImageUrl = $(this).attr('src'); $('.p-img').attr('src', ImageUrl); $('.img-popup').bPopup({ modalClose: true , opacity: 0.8 , positionStyle: 'absolute' , speed: 300 , transition: 'fadeIn' , transitionClose: 'fadeOut' , zIndex : 10 }); }); .img-popup { display:none..
JS & jQuery
유동적인 li width 구하기
#li 갯수가 유동적일때 width 값 구하기 $(function(){ var length = $('.real_ca li').length; var ca_width = $('.real_ca').width(); var li_width = ca_width / length; //실제계산 var real_width = li_width * 100 / ca_width; $('.real_ca li').width(real_width + '%'); }); +css이용 : 부모요소에 dislplay:flex를 준후 자식 요소에 flex:1을 주어서 해결
JS & jQuery
data 값으로 이미지 변경
$(".real_05 ul li a").click(function() { var i; var element = $(".real_05 ul li"); var len = element.length; for (var i=0; i{ $(this).parent("li").siblings("li").eq(i).find("img").attr("src" , $(this).parent("li").siblings("li").eq(i).find("a").data("off")); } $(this).find("img").attr("src", $(this).data("on")); });
728x90
반응형
