您的位置：首页 > 其它

利用透明图片遮罩制作圆角焦点图

2011-09-04 21:52 525 查看

利用透明图片遮罩制作圆角焦点图的好处是后台上传图片，不用经过ps处理成圆角。

无论任何图片在首页焦点图显示都为圆角。

弊端是遮罩图片除透明区外颜色应该和背景颜色相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用透明图片遮罩制作圆角焦点图</title>
<style>
*{margin:0; padding:0}
#wrapper{ margin:100px auto; width:960px}
#slider{position:relative; margin-bottom:20px;width:960px;height:300px;}
#slider_bar{ position:absolute; right:20px; bottom: 20px;}
#slider_bar ul{list-style:none}
#slider_bar li{ float:left;}
#slider_bar li a{display:block; padding:0 5px; margin:0 0 0 5px; border:1px solid #454545; text-decoration:none; color:#333; background:#fff; opacity:0.8;filter:(opacity=80); cursor:pointer}
#slider_bar li a.focus{ border:1px solid #7f940d; text-decoration:none; background: #99CC00; color:#fff}
#slider_img{width:960px; height:300px; overflow:hidden}
#slider_img li{display:none; position:relative}
#slider_img li.focus{ display:block}
#slider_img li a{display:block; overflow:hidden}
#slider_img li a img{width:960px; height:300px; display:block;}
#slider #zhezhao{ position:absolute; top:0; left:0; width:960px; height:300px; background: url(../images/slider.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/slider.png'); /* IE6 */_ background-image: none; /* IE6 */}
#zhezhao a{height:100%; width:100%;display:none}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var imgId="#slider_img";  //图片所在div
var bar="#slider_bar"     //导航工具div
var zhezhao="#zhezhao"
//自然鼠标滑过效果
$(""+bar).find("a").hover(ishow_on);
//设置每3s自动切换滑过效果
setInterval(ishow_slide,3000);
/*
ishow_on(index) 聚焦显示函数（索引）
*/
function ishow_on(index){
if(isNaN(index.valueOf())){ //判断是否含有参数，是则使用默认鼠标滑过事件，否则为自动切换
index=$(""+bar).find("a").index($(this));   //取得当前鼠标已过的a标签索引index
}else{
index=Math.floor(index); //自动切入传入索引值index
}
$(""+bar).find("a").eq(index).addClass("focus")           //活动a标签添加聚焦样式on
.parent().siblings().find("a").removeClass("focus");  //同层a标签取消聚焦样式on
$(""+zhezhao).find("a").eq(index).addClass("focus")
.siblings("a").removeClass("focus");
$(""+imgId).find("li").eq(index).show()               //与聚焦a标签同索引的图片显示
.siblings().hide();             //与聚焦a标签同层图片隐藏

}
function ishow_slide(){
var i=0;
var $img_on=$(""+bar).find("li").children(".focus");
var index=$(""+bar).find("a").index($img_on);
index=Math.floor(index);
if(index==3){  //判断是否最后一张图片，是则重置下一张为第一张图片
i=0;
}else{
i=index+1;
}
ishow_on(i); //调用聚焦显示函数
}
$("a").focus(function(){ $(this).blur();});   //清除a虚线
})
</script>
</head>

<body>
<div id="wrapper">
<div id="slider">
<!--图片区-->
<div id="slider_img">
<ul>
<li class="focus"><a href="#"  ><img src="images/banner.jpg" /></a></li>
<li><a href="#"><img src="images/banner-news.jpg" /></a></li>
<li> <a href="#"><img src="images/about-banner.jpg" /></a></li>
<li> <a href="#"><img src="images/banner-support.jpg" /></a></li>
</ul>
</div>
<!--遮罩链接层-->
<div id="zhezhao"> <a href="product.asp" class="focus"></a> <a href="news.asp"></a> <a href="about.asp"></a> <a href="support.asp"></a> </div>
<!--导航栏-->
<div id="slider_bar">
<ul>
<li><a class="focus">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航