웹 프론트엔드 JS 튜토리얼 jQuery div를 확대하고 축소하기 위한 간단한 구현 코드

jQuery div를 확대하고 축소하기 위한 간단한 구현 코드

May 16, 2016 pm 05:39 PM
크게 하다 축소

复代码 代码如下:

<html xmlns="http://www.w3.org /1999/xhtml">
<head runat="server">
<제목></제목>
<style type="text/css">
.content
{
테두리: 1px 단색 #ccc;
너비: 440px;
오버플로: 숨김;
여백: 10px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($('#content').height() > 400)
$('#content').height(400);
$('#bigger').toggle(function() {
$('#content').height($('#content').height() 100);
$(' #bigger').html('缩小');
}, function() {
$('#content').height($('#content').height() - 100); 🎜>$('#bigger').html('放大')
})
});
</script>
</head>
<본문>
<div id="content" class="content">
내부11<br />
내부2<br />
내부3<br />
내부실4<br />
내부5<br />
내부실6<br />
내부7<br />
내부8<br />
내부9<br />
내부10<br />
내부11<br />
내부12<br />
내부13<br />
내부14<br />
내부15<br />
내부16<br />
내부17<br />
내부18<br />
내부19<br />
내부20<br />
내부21<br />
내부22<br />
내부23<br />
내부容24<br />
내부25<br />
</div>
<br />
<span id="bigger">放大</span>
</body>
</html>

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue를 통해 이미지의 특정 영역에 대한 확대/축소 기능을 구현하는 방법은 무엇입니까? Vue를 통해 이미지의 특정 영역에 대한 확대/축소 기능을 구현하는 방법은 무엇입니까? Aug 26, 2023 pm 04:43 PM

Vue를 통해 이미지의 특정 영역에 대한 확대/축소 기능을 구현하는 방법은 무엇입니까?

HTML, CSS 및 jQuery: 이미지 확대 및 축소의 특수 효과를 얻는 기술 HTML, CSS 및 jQuery: 이미지 확대 및 축소의 특수 효과를 얻는 기술 Oct 24, 2023 am 10:22 AM

HTML, CSS 및 jQuery: 이미지 확대 및 축소의 특수 효과를 얻는 기술

Windows 10 검색창 크기 조정 가이드 Windows 10 검색창 크기 조정 가이드 Jan 04, 2024 pm 05:22 PM

Windows 10 검색창 크기 조정 가이드

macOS 클립보드 기록 잠금 해제, 효율적인 복사 및 붙여넣기 기술 macOS 클립보드 기록 잠금 해제, 효율적인 복사 및 붙여넣기 기술 Feb 19, 2024 pm 01:18 PM

macOS 클립보드 기록 잠금 해제, 효율적인 복사 및 붙여넣기 기술

uniapp을 사용하여 이미지 확대/축소 기능 구현 uniapp을 사용하여 이미지 확대/축소 기능 구현 Nov 21, 2023 am 11:58 AM

uniapp을 사용하여 이미지 확대/축소 기능 구현

Yitian Camera로 사진의 일부를 확대하는 방법 Yitian Camera로 사진의 일부를 확대하는 방법 Feb 23, 2024 pm 01:58 PM

Yitian Camera로 사진의 일부를 확대하는 방법

wps를 화면 크기의 절반으로 줄이는 방법 wps를 화면 크기의 절반으로 줄이는 방법 Mar 20, 2024 pm 09:40 PM

wps를 화면 크기의 절반으로 줄이는 방법

순수 CSS를 통해 이미지 확대/축소 효과를 얻는 방법 순수 CSS를 통해 이미지 확대/축소 효과를 얻는 방법 Oct 18, 2023 am 11:00 AM

순수 CSS를 통해 이미지 확대/축소 효과를 얻는 방법

See all articles