一、简单的图像翻滚
image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：
该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：
img-rollover.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<style>
html , body{
line-height: 1;
background-color: #334873;
}
h1 {
font-family: 'ColaborateRegular', Arial, sans-serif;
}
p {
font-family: 'ColaborateRegular', Arial, sans-serif;
color: white;
}
.logo {
letter-spacing: -1px;
color: rgb(195,151,51);
text-shadow: 2px 2px 1px rgba(0,0,0,.25);
font: normal 54px 'ColaborateThinRegular', Arial, sans-serif;
}
#gallery img {
display: inline-block;
margin: 10px;
border: 1px solid rgb(0,0,0);
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(ducument).ready(
);//end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">Easy Sir</p>
</div>
<div class="content">
<div class="main">
<h1 id="Rollover-Images">Rollover Images</h1>
<p>Mouse over the images below</p>
<div id="gallery">
<a href="images/매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다..jpg"><img src="/static/imghwm/default1.png" data-src="images/green.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다.">
</a>
<a href="images/green.jpg"><img src="/static/imghwm/default1.png" data-src="images/green.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="green">
</a>
<a href="images/orange.jpg"><img src="/static/imghwm/default1.png" data-src="images/orange.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="orange">
</a>
<a href="images/purple.jpg"><img src="/static/imghwm/default1.png" data-src="images/purple.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="purple">
</a>
<a href="images/red.jpg"><img src="/static/imghwm/default1.png" data-src="images/red.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="red">
</a>
<a href="images/yellow.jpg"><img src="/static/imghwm/default1.png" data-src="images/yellow.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="yellow"></a>
</div>
</div>
</div>
</div>
</body>
</html>
这段代码十分简单。主要就是包含一个Logo部分，一个标题和6个链接。中间我们省略了38行中的jQuery代码部分，下面我们逐步在其中添加代码实现图像翻滚的效果。
1、改变图像的src属性
我们知道显示在Web页面的每一个图像都有一个src属性，该属性表示文件的路径，它指向服务器上的一幅图片。如果我们更改了该属性的值，浏览器将会显示新的图片。对于以上代码，我们首先可以通过each()函数获取所有img元素的遍历，在对应位置添加如下代码：
<script>
$(document).ready(function(){
$('#gallery img').each();
});//end ready
</script>
我们可以通过jQuery的arrt()方法来获取img的src属性。然后，我们将以上img的src属性值替换为新图片的路径，方法如下：
<script>
$(document).ready(function(){
$('#gallery img').each(function(){
var oldSrc = $(this).attr('src');
var newPic = new Image();
var imgExt = /(\.\w{3,4}$)/;
newPic.src = oldSrc.replace(imgExt, '_h$1');
});
});//end ready
</script>
后面的图像预载入中会有这段代码的简单分析，这里首先复习一下，attr()函数允许读取一个标签的指定html属性值，如上例中传入的'src'参数即读取图片的src属性。如果给attr()方法传入第二个参数，则可以重设该属性的值。比如：
$('#pic1').attr('src', 'images/newImg.jpg');
另外，attr()函数也允许我们一次修改多个HTML属性值。比如，当我们需要载入的newImg和oldImg尺寸不符的时候，为了避免新图片的扭曲，我们可以同时更改img元素的宽、高属性。方法如下，传入一个对象直接量作为参数：
var newImg = new Image();
newImg.src = 'images/newImage.jpg';
$('#pic1').attr({
src: newImg.src,
width: newImg.width,
height: newImg.height
});
2、图像预载入
如果我们不加”心机”地在鼠标移动到指定图片时改变图像的src属性来实现image-rollover，会有一个小问题。当我们把鼠标移动到指定图标上时，该图像的src属性被改变，此时浏览器会去新的src路径下载资源图片，现场下载图片往往会给用户一个明显的延迟感。为了克服这个恼人的问题，我们可以预先将图片下载到浏览器的缓存中。
实际上，在代码2中，我们便实现了图片的预载入。代码2中的第4行，首先获取每幅图片的src属性；第5行创建一个新图像；第6~7行，使用正则表达式，在旧图像src末尾添加_h后赋给新创建图像的src。例如旧图片src为'images/매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다..jpg'，将'images/매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다._h.jpg'赋给新创建的newPic的src属性。
代码执行到'newPic.src = oldSrc.replace(imgExt, ‘_h$1');'时，浏览器便会到指定的src去下载新图片放在浏览器缓存中。此时尚未触发鼠标事件，我们通过在脚本开始处将需要的图片逐一下载实现图像的预载入。
3、添加hover()事件实现图像rollover
在完成图像预载入后，接下来就是给需要翻滚的图片添加一个hover事件了。当鼠标移动到指定的图片时，图片变为绚丽的彩色，移走时变回黑白。我们在代码2的基础上，作如下添加：
$(document).ready(function(){
$('#gallery img').each(function(){
var oldSrc = $(this).attr('src');
var newPic = new Image();
var imgExt = /(\.\w{3,4}$)/;
newPic.src = oldSrc.replace(imgExt, '_h$1');
$(this).hover(
function(){
$(this).attr('src', newPic.src);
},
function(){
$(this).attr('src', oldSrc);
}
);//end hover
});
});//end ready
代码十分简单，只不过在7~14行通过this给当前图片添加了一个hover事件，鼠标移入移出时改变图片的src。此时，保存添加后的img-rollover.html，注意将需要包含的js/jquery-1.7.2.min.js以及图片资源按照代码中指定的路径放置完好。大功告成，可以像预览图片那样测试图片导航图片翻滚的效果了。
二、漂亮的相册集
在实现图像的翻滚之后，我们希望进一步，当我们点击小的缩略图的时候，能够展现图片的大图，像一个可以翻看的相册一样。预览如下：
接下来我们在实现了小图翻滚的代码1的基础上，增添相册集的功能。
1、为什么要把img放在链接中
可能有人不理解，为什么要把img分别包含在链接中。实际上这是一种无干扰的JavaScript技术，如果你的浏览器关闭了JavaScript，这里将图像包含在一个链接中，当用户点击小图的时候，同样会访问到大图文件。只不过是通过链接的方式，单击链接时会退出当前Web页面并根据链接载入大图文件。如下图所示：
以上是为关闭了JavaScript的用户准备的。然而在通常情况下，对于使用JS的访问者，我们希望单击小的缩略图的时候在页面上呈现该图的大图，而不是链接到另一个页面。一般情况下，单击一个链接会使Web浏览器载入链接指向的内容，所以此处第一步我们需要做的就是阻止浏览器在单击图片链接的时候跳转页面。我们使用事件的preventDefault()方法来阻止事件的常规行为，添加如下代码：
$(document).ready(function(){
...//省略未改动部分
$('#gallery a').click(function(evt){
evt.preventDefault();
});//end click
});//end ready
添加的代码为链接添加单击事件，单击链接时，通过事件的preventDefault()方法阻止了事件的常规行为。此时我们再在页面单击图片链接的时候，浏览器便不会跳转到大图页面了。当然，对于没有JavaScript的浏览器依然会实现跳转，因为关闭是通过JavaScript来完成的。
2、单击缩略图在页面呈现大图
为了显示大图，我们在上面代码基础上添加一个id为bigImg的div，如代码4第9行：
<div id="gallery"> <a href="images/매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다..jpg"><img src="/static/imghwm/default1.png" data-src="images/green.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다."></a> <a href="images/green.jpg"><img src="/static/imghwm/default1.png" data-src="images/green.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="green"></a> <a href="images/orange.jpg"><img src="/static/imghwm/default1.png" data-src="images/orange.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="orange"></a> <a href="images/purple.jpg"><img src="/static/imghwm/default1.png" data-src="images/purple.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="purple"></a> <a href="images/red.jpg"><img src="/static/imghwm/default1.png" data-src="images/red.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="red"></a> <a href="images/yellow.jpg"><img src="/static/imghwm/default1.png" data-src="images/yellow.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="yellow"></a> </div> <div id="bigImg"><div>
接下来，我们通过jQuery为要显示的大图创建一个img标签，在代码3中添加如下代码：
...//省略未改动部分
$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');
var newImg = $('<img src="/static/imghwm/default1.png" data-src="/file_images/article/201604/2016428145634273.gif?2016328145644" class="lazy" + imgPath + '" alt="매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다." >');
newImg.hide();
$('#bigImg').prepend(newImg);
newImg.fadeIn(1000);
});//end click
实际上，每当我们点击一个缩略图的时候，代码都会为我们创建一个新的img并添加到
中，从DOM的角度看，会不停地增加子节点：
为了实现”相册”翻阅的效果，我们在显示新的相片的时候同时要把之前的图片删掉。继续在代码5中作如下添加：
...//省略未改动部分
$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImg = $('#bigImg img');
var newImg = $('<img src="/static/imghwm/default1.png" data-src="/file_images/article/201604/2016428145834548.jpg?2016328145843" class="lazy" + imgPath + '" alt="매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다." >');
newImg.hide();
$('#bigImg').prepend(newImg);
newImg.fadeIn(1000);
oldImg.fadeOut(1000, function(){
$(this).remove();
});
});//end click
代码第6行首先获取当前存在的图像oldImg，在新的图片淡入的时候，此图应该进行淡出处理。11~13行，在新的图片淡入之后，oldImg淡出。同时给fadeOut函数传入一个回调函数，在oldImg淡出之后一并移除该图像的img标签。这样我们就保证在DOM树中
始终只有一个img节点，而不会无限地增长下去。接下来进行一些细节的调整，当我们点入这个页面的时候，希望默认显示第一幅图片，为了实现这个小功能，我们只需要在代码6后面添加一行代码：
...//省略未改动部分
$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImg = $('#bigImg img');
var newImg = $('<img src="/static/imghwm/default1.png" data-src="/file_images/article/201604/2016428145834548.jpg?2016328145843" class="lazy" + imgPath + '" alt="매우 아름다운 사진 앨범 세트입니다. jquery를 사용하여 사진 앨범 set_jquery를 만듭니다." >');
newImg.hide();
$('#bigImg').prepend(newImg);
newImg.fadeIn(1000);
oldImg.fadeOut(1000, function(){
$(this).remove();
});
});//end click
$('#gallery a:first').click();
我们在后面添加了$('#gallery a:first').click();，在jQuery中，如果没有给事件函数传递任何参数，jQuery便会触发一次该事件。保存代码，重新用浏览器打开，第一幅图片已经默认显示了：
3、css绝对定位实现图片的重叠
漂亮的相册集基本上已经完成了，但是吹毛求疵地看，当我们更换要查看的照片的时候，旧图片的淡出会在新图的后面完成，给人一种赘余不利落的感觉：
为了解决这个问题，我们让新图的淡入和旧图的淡出重叠显示。为了实现图片的重叠显示我们需要用到css的绝对定位。
通常情况下，在隐藏或者添加一个新的元素的时候，其他元素会像流一样自动移动来填补空白或者给新的元素腾位置。但是像我们本文的示例，如果我们不希望看到这样的效果，我们可以使用css的绝对定位。css的绝对定位会把一个元素放置在常规页面内容流之外，这样就不会在内容流中出现填补移动等操作了。如果我们使用绝对定位将元素定位在相同的位置，那么元素将会重叠在一起。本例中，这恰恰是我们想要的。实现起来其实十分简单，只需要在css中将
中的img指定为绝对定位就可以了。我们在代码1的前添加以下代码：
#bigImg img {
position: absolute;
}
保存，重新用浏览器打开，大功告成！漂亮的相册已经做好了。
jquery文件下载
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AMJavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.
C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AMC 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.
웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AMJavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AMPython은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.
JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AMC와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.
자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.
JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.
JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
WebStorm Mac 버전
유용한 JavaScript 개발 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
