在鼠标上,显示图像的大版本
onmouseover, show large version of image
当您将鼠标悬停在图像的较小版本上时,我正试图显示图像的较大版本。我目前有4个功能来完成这项工作,但我想知道是否可以通过使用其中一个来完成。问题是,如果我只有一个函数,我不知道如何更改源路径。我的代码如下。
HTML:(为了测试的目的,我只在鼠标上有第一个带有showImage()的图像)
<section>
<article>
<header>Mouse Over and Mouse Out Events</header>
<img onmouseover="showImage()" onmouseout="hideImage()" id="one" src="images/small/catbread1.jpg" title="catbread1" alt="Cat with bread on face 1" /> <img onmouseover="bigImage2()" onmouseout="hideImage()" id="two" src="images/small/catbread2.jpg" alt="Cat with bread on face 2" />
<img onmouseover="bigImage3()" onmouseout="hideImage()" id="three" src="images/small/catbread3.jpg" alt="Cat with bread on face 3" /> <img onmouseover="bigImage4()" onmouseout="hideImage()" id="four" src="images/small/catbread4.jpg" alt="Cat with bread on face 4" />
</article>
<article>
<header>Cat Photos</header>
<img id="full" src="" />
</article>
Javascript:
function hideImage() {
document.getElementById("full").src = "";
}
function bigImage1() {
document.getElementById("full").src = "images/large/catbread1.jpg";
}
function bigImage2() {
document.getElementById("full").src = "images/large/catbread2.jpg";
}
function bigImage3() {
document.getElementById("full").src = "images/large/catbread3.jpg";
}
function bigImage4() {
document.getElementById("full").src = "images/large/catbread4.jpg";
}
function showImage() {
document.getElementById("full").src = "images/large/" + this.title + ".jpg";
}
看起来您已经将图像排列到了large/
和small/
的平行层次结构中——这很好,它会让这变得很容易,而且您几乎已经在showImage
中完成了。我将使用一些库存照片来构建这个例子,这样它就可以明显地工作了。
基本上你想做的是:
- 抓取鼠标悬停的图像
- 将其路径的
small/
部分替换为large/
- 将其分配给
full
元素
要获取鼠标悬停的图像,请在onmouseover
事件期间将其传递给showImage
。触发事件的元素可用作this
。
<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />
showImage
接受参数,您可以使用replace()
进行路径转换,然后按照现有方式将其分配给full
。
function showImage(img) {
var src = img.src;
var largeSrc = src.replace('small', 'large');
document.getElementById('full').src = largeSrc;
}
打开这个片段进行工作演示:
function hideImage() {
document.getElementById("full").src = "";
}
function showImage(img) {
var src = img.src;
var largeSrc = src.replace('small', 'large');
document.getElementById('full').src = largeSrc;
}
<article>
<header>Mouse Over and Mouse Out Events</header>
<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />
<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/13937/pexels-photo-13937-small.jpeg" />
<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/7517/animal-sitting-animals-inside-small.jpg" alt="Cat with bread on face 3" />
<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/254/pet-kitten-cat-lying-small.jpg" />
</article>
<article>
<header>Cat Photos</header>
<img id="full" />
</article>
为什么不试试简单的CSS?
.badboy {
background : url( http://g02.a.alicdn.com/kf/HTB16ENqIXXXXXaUXVXXq6xXFXXXp/1000-autumn-maples-font-b-fall-b-font-font-b-scenery-b-font-jigsaw-puzzle-casual.jpg);
width: 300px;
height : 150px;
margin: 0 auto;
display: block;
transition : ease all .5s
}
.badboy:hover {
background : url( http://media-cdn.tripadvisor.com/media/photo-s/01/48/61/6c/beautiful-scenery-around.jpg);
width: 400px;
height : 250px;
}
<div>
<img class="badboy">
</div>
相关文章:
- 图像加载不适用于 IE 8 或更低版本
- 上载图像的新版本并避免缓存
- 仅在桌面版本中加载图像
- 如何添加指向 Fancybox 的链接以下载图像的高分辨率版本
- 简单的点击图像以更大的版本打开图像,如灯箱 2
- 使用Ajax(jquery版本)获取图像文件标记值,并将结果显示为实时预览器
- 在鼠标上,显示图像的大版本
- 海报图像在视频中不起作用,azure媒体播放器的1.5.0版本更新
- 从缩略图图像显示屏幕范围的版本
- 将图像悬停并在画布元素中显示光标周围区域的缩放版本
- Multer新版本,未定义上传的图像文件
- 更改图像代码为@2x版本的高DPI显示
- 如何在Firefox中使用JavaScript在鼠标悬停时显示图像的灰度版本
- 使用javascript更改移动版本的图像源文件夹
- 随机版本号与图像强制缓存
- 将图像调整为缩略图版本
- 在redux表单的6.0版本rc.3中添加了一个用于上传多个图像的字段
- Kineticjs图像缓存在5.1版本中无法工作
- 维护css,js,font-cion,图像版本的更好方法
- 在某些版本的Chrome中,无法使用Javascript更改图像的src