본문 바로가기

제이쿼리4

[jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22.
[jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 마우스 호버효과처럼 보이지만 조금 다른 mouseenter/mouseleave 효과 입니다. 마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로 드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다. 주로 사용되는 부분 드롭다운 버튼 인풋 박스 HTML KR KR EN CN CSS #Lang > * { display: inline-block; vertical-align: middle; } #Lang .lang_list { position: relative; width: 50px; text-align: center; font-size: 14px; } #Lang .lang_list > a { display: block; width: 100%; height: 40px; line-height:2.5; f.. 2024. 1. 31.
책넘기는 효과 제이쿼리 플러그인 제이쿼리 플러그인 - BOOKLET 웹사이트 소책자, 브로슈어, 신문, 기업 홍보물 등에 종종 쓰이는 책장 넘기는 효과. 제이쿼리로 만들어져서 모바일에서도 볼 수 있다는 장점이 있다. 라이센스 MIT 라이센스로 수정, 배포가 자유로우며 실무 혹은 상업적으로 이용 가능 ( *단 저작권 표시및 허가 표시를 소프트웨어의 복제물 또는 중요한 부분에 기재한다) 사용방법 HTML Yay, Page 1! Yay, Page 2! Yay, Page 3! Yay, Page 4! 홈페이지를 방문하거나 데모를 다운 받으면 다양한 효과를 확인 할 수 있다. 너비/높이/속도/읽는방향,속도/페이지순서,패딩/그림자/자동시작/탭/화살표...등등 여러가지 옵션들을 선택 가능 활용 샘플 : 서울여자 간호대학 브로셔 다운로드 2021-07.. 2020. 12. 29.
[JS 활용]이미지맵속 내용 복사하기, 해시태그 내용 복사하기 스크립트 html 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 제이쿼리 소스 $('.hashtag').click(function(){ var urlAddress= $('#hashtagTxt'); urlAddress.css('display','block').select(); document.execCommand("Copy"); urlAddress.css('display','none'); alert('해시태그가 복사되었습니다'); return false; }); 결과 일전에 이미지맵 클릭시 새창 띄우기와 함께 같이 병행해서 사용하면 좋을듯 https://lionbum.tistory.com/37 이미지 맵 클릭시 새창 팝업 띄우기 이미지 .. 2020. 12. 15.
728x90
반응형

티스토리툴바