在图片库中添加一个交叉渐变效果
Add a cross fade effect on an image gallery
我有一个较小的图像,这是一个有8个按钮的控件,我已经设置了8个区域形状,所以当看起来像一个按钮被点击时,较大的主图像被更新。
当一个区域形状被点击时,相关的图像加载,但我想让图像淡入和旧图像淡出。
这可能吗?很高兴探索Javascript和Jquery解决方案。谢谢。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">
function showImage(image){
var mainImage = document.getElementById('mainImage');
mainImage.src = image;
}
</script>
</head>
<body>
<div><img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')" />
<area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')" />
<area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')" />
<area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')" />
<area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')" />
<area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')" />
<area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')" />
<area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')" />
</map>
</div>
<div>
<img id="mainImage" src="A.jpg" />
</div>
</body>
</html>
我建议将页面上的所有图像都放在彼此的顶部。下面的代码将把该区域链接到的所有图像添加到一个容器中,然后当你点击…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#Map area').each(function(){
var area = $(this);
var img = $('<img>').attr('src', area.attr('href'));
$('#imgcontainer').append(img);
area.click(function(){
$('#imgcontainer img').stop().fadeOut();
img.stop().fadeIn();
return false;
})
});
$('#imgcontainer img:first-child').show();
});
</script>
<style>
#imgcontainer{width:260px;height:193px;}
#imgcontainer img{display:none;position:absolute;}
</style>
<img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="A.img" />
<area shape="rect" coords="147,21,205,54" href="B.img" />
<area shape="rect" coords="60,58,121,90" href="C.img" />
<area shape="rect" coords="147,59,205,92" href="D.img" />
<area shape="rect" coords="61,92,121,125" href="E.img" />
<area shape="rect" coords="146,96,205,128" href="F.img" />
<area shape="rect" coords="60,128,122,163" href="G.img" />
<area shape="rect" coords="146,131,204,164" href="I.img" />
</map>
<div id="imgcontainer"></div>
要做到这一点,你需要创建一个新图像,并将旧图像淡出,新图像进入。
这个应该可以工作:
function showImage(image){
var mainImage = document.getElementById('mainImage');
$('#mainImage').before('<img src="' + image + '" id="newImage" />');
$('#mainImage').fadeOut().remove();
$('#newImage').attr('id','mainImage');
}
你应该使用CSS确保新图像位于主图像的后面。
源(s)jQuery API - .append()
jQuery API - fade
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 我怎么能有一个自动渐变背景使用JavaScript,它适用于最新版本的Internet Explorer
- 使用Javascript/jQuery使用spritesheet从一个类渐变到另一个类
- 我有一个闪烁框,如何添加渐变或更轻松地对其进行编程
- 让一个html元素闪烁一种背景色,然后渐变为另一种
- 将一个图像渐变为另一个图像
- jQuery:图像渐变为另一个图像
- 在tick函数createjs中调用一个渐变
- 通过一个固定的L形路径渐变与MotionGuide插件
- 如何在地图上用渐变绘制一个区域
- 在图片库中添加一个交叉渐变效果
- d3js v4:我如何应用力到节点的点击,使它看起来像一个渐变
- 我在哪里可以找到一个图像渐变器/所有其他图像淡出
- 我可以使用渐变将一个饼图转换成另一个饼图吗?
- KineticJS:我怎么能保持一个渐变运行,而它的浏览器选项卡是不活跃的
- 如何制作一个Javascript渐变滑动背景
- 创建一个渐变为白色的页面过渡,但这似乎不起作用
- 从一个背景渐变到另一个背景
- 我如何添加渐变的背景颜色在一个颜色时钟