> 다운로드 >  JS 효과 > 그림 특수 효과

  • 순수 CSS3 웹페이지 사진 마우스오버 효과

    순수 CSS3 웹페이지 사진 마우스오버 효과. 마우스를 올리면 사진의 테두리가 레이어별로 확장됩니다. ie9+, 크롬, 파이어폭스 브라우저를 지원합니다. 사용 방법: 1. 헤드 영역 참조 파일 lrtk.css 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요

    그림 특수 효과16422017-03-11
  • 매우 멋진 CSS3 그림 3D 회전 효과

    매우 멋진 CSS3 그림 3D 회전 효과. 마우스를 올리면 그림이 반대쪽으로 3D 회전합니다. 크롬, 파이어폭스 브라우저와 호환됩니다. 사용 방법: 1. 헤드 영역 참조 파일 컴포넌트.css, 데모.css, Normalize.css 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요 4. 이미지 경로를 수정하려면, component.css를 열어주세요.

    그림 특수 효과18832017-03-11
  • 15개의 CSS3 이미지 호버 효과 코드

    15가지 CSS3 이미지 호버 효과 코드, 매우 실용적이며 IE9+, Chrome 및 Firefox 브라우저와 호환됩니다. 사용 방법: 1. 헤드 영역에 스타일 시트 파일 Normalize.css, 데모.css, component.css를 추가하세요 2. 원하는 효과를 선택하세요: <Figure class="효과-lily"> ... </Figure>는 단위 효과입니다 3. 필요에 따라 세 개의 CSS 파일을 간소화할 수 있습니다

    그림 특수 효과19742017-03-11
  • 5가지 CSS3 아이콘 마우스 오버 효과

    5 CSS3 아이콘 마우스오버 효과, 이미지 위에 마우스를 올리면 효과를 볼 수 있습니다. 주요 브라우저와 호환됩니다. 사용 방법: 1. 헤드 영역 참조 파일 lrtk.css 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요

    그림 특수 효과18342017-03-11
  • 6개의 이미지 마우스오버 효과 JS 코드

    6개의 이미지 마우스오버 효과 JS 코드. 마우스를 이미지 위로 가져가면 텍스트 제목이 6개의 다른 애니메이션 형식으로 나타납니다. 이는 PHP 중국어 웹사이트에서 다운로드하는 것을 권장합니다. 사용 방법: 1. 헤드 영역은 CSS 파일 modernizr.custom.js을 참조합니다. 2. 파일에 !-- code start --!-- code end --region code 를 추가하세요 3. 이미지 폴더의 사진을 해당 경로에 복사하세요

    그림 특수 효과20382017-03-11
  • jQuery 자동 스크롤 5화면 그림 배너 코드

    jQuery는 그림을 전환하기 위한 왼쪽 및 오른쪽 버튼을 사용하여 5개의 화면 그림 배너 코드를 자동으로 스크롤합니다. 그림으로 마우스를 이동하면 그림이 강조 표시되고 그림자가 표시됩니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역은 lrtk.css 파일과 js 라이브러리를 참조합니다. 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요

    그림 특수 효과20622017-03-11
  • 강렬한 그림 전체 화면 탐색 플러그인(jQuery)

    강렬한 사진 전체 화면 탐색 플러그인(jQuery)은 사진을 마우스로 클릭하면 사진을 전체 화면으로 탐색할 수 있으며, 마우스를 이동하면 사진의 다른 부분을 볼 수 있어 사진 앨범에 적합합니다. 사진 세부정보를 표시합니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역은 styles.css 및 Intensity.js 파일을 참조합니다 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요 4. CSS 파일에서 먼저 데모 이미지의 배경 이미지 속성인 .demo-image.second, .demo-image.third를 수정하세요

    그림 특수 효과17312017-03-11
  • jQuery 그림 배경 벽 스포트라이트 효과 코드

    jQuery 이미지 배경 벽 스포트라이트 효과 코드입니다. 특정 이미지 위에 마우스를 올리면 이미지가 밝아지고 다른 이미지는 어두워집니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역은 lrtk.css 및 jquery 파일을 참조합니다. 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요 4. 이미지의 투명도, 불투명도: 0.2를 수정합니다. 값 범위는 0과 1 사이의 소수점입니다.

    그림 특수 효과17542017-03-11
  • jQuery 이미지 콘텐츠 확장-축소 탭

    jQuery 이미지 콘텐츠는 탭을 펼치거나 접을 수 있으며, 이미지를 클릭하면 해당 텍스트 설명이 나타납니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역은 다음 파일을 참조합니다 <link rel="stylesheet" href="css/jquery.gridquote.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridquote.min.js"></script> 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 이미지 폴더의 사진을 해당 경로에 복사하세요 4. 다음 js 코드를 소개하세요 <스크립트 유형="텍스트/자바스크립트"> $(문서).ready(함수($){ $('.grid-container').gridQuote(); });

    그림 특수 효과13822017-03-11
  • jQuery small2big 이미지 확대/축소 플러그인

    주류 브라우저와 호환되는 jQuery small2big 이미지 스케일링 플러그인, PHP 중국어 웹사이트에서 다운로드하는 것이 좋습니다! 사용 방법: 1. 헤드 영역은 CSS 및 JS 라이브러리 파일을 참조합니다 2. 파일에 html 코드를 추가하세요. 하나의 li는 하나의 사진에 해당합니다. 이미지 폴더의 사진 이름은 1.jpg, 2.jpg, ...로 지정됩니다. <ul class="s2b_col" id="s2b_col"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 3. 다음 js 코드를 소개하세요 $(문서).ready(함수(){ $("#s2b_col").small2big({ s2bRadius: 170, //사진을 확대했을 때 원형 프레임의 반경 s2bColLiRowMargin: -10, //각 원 사이의 거리 s2bLiBorderColor: "#000" // 원형 프레임 색상 // s2bLiAlign: "V" 그림 세로 배열 }).initS2bCol().addS2bFunction(); });

    그림 특수 효과16982017-03-11
  • jQuery 카드 스타일 이미지 회전 코드

    jQuery 카드 스타일 이미지 회전 코드를 클릭하면 이미지를 왼쪽과 오른쪽으로 전환할 수 있습니다. 상단의 무지개 탐색 효과도 좋습니다. PHP 중국어 웹사이트에서는 다운로드를 권장합니다. 사용 방법: 1. 헤드 영역에 Reset.css와 style.css를 추가하세요 2. 헤드 영역에 jquery-1.4.2.min.js, roundabout.js, roundabout_shapes.js, gallery_init.js를 추가하세요 3. 본문 영역에 코드 주석을 추가하세요 4. 현재 탐색은 class="current"로 표시됩니다.

    그림 특수 효과17202017-03-11
  • jQuery는 Jingdong 사진의 밝아지고 어두워지는 효과를 모방합니다.

    jQuery는 Jingdong 사진의 밝아지고 어두워지는 효과를 모방합니다. 사진 위에 마우스를 올리면 사진이 밝아지고 다른 사진은 어두워집니다. 마우스를 멀리 움직이면 모든 사진이 더 밝아집니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역은 lrtk.css 파일을 의미하며, animate.js 라이브러리는 별도로 작성된 애니메이션 기능입니다. <link href=" css/lrtk.css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/animate.js"></script> <script type="text/javascript" src="js/lrtk.js"></script> 2. class="one"은 한 열에 두 개의 그림을 담을 수 있는 div 블록을 나타냅니다. class="two"는 한 열에 하나의 그림을 담을 수 있는 div 블록을 나타냅니다. 텍스트 설명은 해당 에 있습니다. 클래스 텍스트로 div 블록 수정 3. js 코드에서 opacity 매개변수는 투명도를 조정하고 세 번째 매개변수는 속도를 조정합니다 애니메이션(imgs[i],{왼쪽:0,불투명도:1},100);

    그림 특수 효과15962017-03-11
  • 이미지에 대한 jQuery 마우스 오버 효과

    jQuery에는 이미지 위에 마우스를 올려 놓으면 마스크 효과가 나타나고 텍스트가 페이드 인 및 페이드 아웃됩니다. 이는 주류 브라우저와 호환됩니다. 사용 방법: 1. 헤드 영역은 lrtk.css 파일과 js 라이브러리를 참조합니다. <link rel="stylesheet" type="text/css" href="css/lrtk.css" media="all"> <script type="text/javascript" src="js/jquery.min.js"></script> 2. 파일에 <!-- code start --><!-- code end --> 지역 코드 를 추가하세요. 3. 구체적인 세부 조정은 코드 주석을 참조하세요 4. 코드에서 텍스트와 점프 링크가 수정되었습니다 <div class="배너"> <!-- 사진 수정 --> <a href="http://www.lanrentuku.com/" target="_blank"> <img height="125" width="125" alt="Mail Chimp" src="images/seagaia_miyazaki.jpg" /> </a> <!-- 텍스트 수정 --> <p class="companyInfo">사진정보 5</p> <div class="cornerTL"></div> <div class="cornerTR"></div> <div class="cornerBL"></div> <div class="cornerBR"></div> </div>

    그림 특수 효과14602017-03-11
  • jqzoom 그림 증폭기 코드

    jqzoom 이미지 증폭기 코드, 제품 이미지 표시에 적합, 주류 브라우저와 호환, PHP 중국어 웹사이트에서 다운로드하는 것이 좋습니다! 사용 방법: 1. 헤드 영역 소개 <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> 2. js 라이브러리를 소개합니다 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> 3. jqzoom 함수 라이브러리 호출 <스크립트 유형="텍스트/자바스크립트"> $(함수() { 변수 옵션 = { ZoomWidth: 250, //돋보기의 너비 ZoomHeight: 250,//돋보기의 높이 ZoomType:'reverse' }; $(".jqzoom").jqzoom(옵션); }); 구성 매개변수: ZoomType, 기본값: 'standard', 다른 값은 'reverse', 원본 이미지를 반투명 레이어로 덮을지 여부입니다. ZoomWidth, 기본값: 200, 확대된 창의 너비. ZoomHeight, 기본값: 200, 확대된 창의 높이. xOffset, 기본값: 10, 원본 이미지를 기준으로 확대 창의 x축 오프셋 값은 음수일 수 있습니다. yOffset, 기본값: 0, 원본 이미지에 대한 확대 창의 y축 오프셋 값은 음수일 수 있습니다. position, 기본값: 'right', 확대된 창의 위치, 값은 'right', 'left', 'top', 'bottom'일 수도 있습니다. 렌즈, 기본값: true, false인 경우 원본 이미지에 렌즈가 표시되지 않습니다. imageOpacity, 기본값: 0.2, ZoomType 값이 'reverse'인 경우 이 매개변수는 마스크의 투명도를 지정하는 데 사용됩니다. title, 기본값: true, 확대 창에 제목을 표시합니다. 값은 a 마크의 제목 값일 수 있으며, 그렇지 않은 경우 원본 이미지의 제목 값입니다. showEffect, 기본값: 'show', 창이 확대될 때 효과를 표시하며 값은 'show', 'fadein'일 수 있습니다. hideEffect, 기본값: 'hide', 확대된 창을 숨길 때 효과: 'hide', 'fadeout'. fadeinSpeed, 기본값: 'fast', 확대된 창의 페이드인 속도(옵션: 'fast', 'slow', 'medium'). fadeoutSpeed, 기본값: 'slow', 확대된 창의 페이드아웃 속도(옵션: 'fast', 'slow', 'medium'). showPreload, 기본값: true, 로딩 프롬프트 표시 여부 로딩 확대/축소(옵션: 'true', 'false'). preloadText, 기본값: '확대/축소 로드 중', 사용자 정의 로딩 프롬프트 텍스트. preloadPosition, 기본값: 'center', 로딩 프롬프트의 위치, 값은 CSS를 통해 위치를 지정하기 위해 'bycss'일 수도 있습니다.

    그림 특수 효과16182017-03-11
  • 두 가지 HTML5 이미지 표시 효과

    두 가지 종류의 HTML5 이미지 표시 효과, 부드러운 애니메이션 효과, 주류 브라우저와 호환, PHP 중국어 웹사이트에서 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역에 스타일시트 파일인 app.css, index.css,fonts.css를 추가하세요 2. 웹페이지에 <!-- 코드 시작 --><!-- 코드 끝 --> 댓글 영역 코드를 추가하세요 3. 아이콘은 모두 웹 오픈 글꼴을 사용합니다. 특정 파일은 CSS 디렉토리를 참조하세요

    그림 특수 효과16752017-03-11
  • jQuery 마우스가 정사각형 이미지 위로 이동하여 둥근 모서리 효과

    jQuery는 정사각형 이미지를 통과할 때 마우스를 둥근 가장자리 효과로 전환합니다. 이미지를 클릭하면 팀 페이지 표시에 적합한 부동 레이어가 팝업됩니다. 이는 주류 브라우저와 호환됩니다. 사용 방법: 1. 스타일시트 파일 lrtk.css를 헤드 영역에 추가하세요 2. 헤드 영역에 jquery-1.7.1.js를 추가하세요 3. 웹페이지에 <!-- 코드 시작 --><!-- 코드 끝 --> 주석 영역 코드를 추가합니다.

    그림 특수 효과27432017-03-11
  • CSS3 원형 이미지 마우스 회전 효과

    CSS3 원형 이미지에는 마우스 후 회전 효과가 있습니다. 이미지에 짧은 제목과 설명이 있습니다. PHP 중국어 웹사이트에서는 다운로드를 권장합니다. 사용 방법: 1. 헤드 영역에 스타일시트 파일 lrtk.css를 추가하세요 2. 웹페이지에 <!-- 코드 시작 --><!-- 코드 끝 --> 댓글 영역 코드를 추가하세요 3. 사진은 너비와 높이가 220픽셀 이상인 정사각형이어야 하며 더 나은 결과를 얻으려면 일정한 여백이 있어야 합니다.

    그림 특수 효과14342017-03-11
  • jQuery 이미지 목록 애니메이션 표시 효과

    jQuery 이미지 목록 애니메이션 표시 효과는 이미지 위로 마우스를 이동하면 텍스트 설명이 팝업되며, 이는 자료 이미지 목록 및 웹사이트 템플릿 테마에 매우 적합합니다. 주류 브라우저와 호환됩니다. 사용 방법: 1. 스타일시트 파일 lrtk.css를 헤드 영역에 추가하세요 2. 헤드 영역에 jquery.1.4.2.min.js 및 lrtk.js를 추가하세요 3. 웹페이지에 <!-- 코드 시작 --><!-- 코드 끝 --> 주석 영역 코드를 추가하고 링크와 사진을 수정합니다.

    그림 특수 효과16472017-03-11
  • 그리드 그림 아코디언 jquery 특수 효과 코드

    그리드 이미지 아코디언 jquery 특수 효과 코드는 그리드 아코디언 썸네일과 아코디언 패널의 기능을 결합하여 이미지 웹 사이트를 표시하는 흥미로운 방법을 제공합니다. XML 또는 HTML을 사용하도록 선택할 수 있습니다. 강력한 API를 사용하면 이 jQuery 플러그인의 기능을 더욱 향상시켜 자신의 애플리케이션에 쉽게 통합할 수 있습니다. 주류 브라우저와 호환되며 PHP 중국어 웹사이트에서는 다운로드를 권장합니다! 사용 방법: 1. 헤드 영역에 스타일시트 파일 style.css 및 Grid-accordion.css를 추가하세요 2. 헤드 영역에 jquery-1.7.1.min.js 및 jquery.gridAccordion.min.js를 추가하세요 3. 상단에 아코디언 이미지 구성 js 코드 추가 4. 웹페이지에 <!-- 코드 시작 --><!-- 코드 끝 --> 댓글 영역 코드를 추가하세요 5. 외부 입력(예: openpanel(3), nextpanel(), Previouspanel(), getpanelat(2) 등)을 사용하여 아코디언 썸네일을 제어할 수 있는 공개 메서드

    그림 특수 효과21682017-03-11
  • jqzoom은 Jingdong 제품 세부 정보 페이지에서 제품 사진의 돋보기 효과를 실현합니다.

    jqzoom은 Jingdong 제품 상세 페이지에서 제품 사진의 돋보기 효과를 구현합니다. 쇼핑몰 웹사이트에서 제품을 확대하여 더 명확하게 볼 수 있도록 자주 사용됩니다. PHP 중국 웹사이트에서는 다운로드를 권장합니다.

    그림 특수 효과19802017-02-06