多图片产品展示

========================================================
Js
========================================================
$(function() {
$(".gb_relimg a").mouseover(function(){

$(".gb_relimg a").removeAttr("className")

$(".gb_relimg a").each(function(){
if ($(this).attr("className")=="gb_active")
{
$(this).removeAttr("className")
}
else
{
//$(this).attr("className","gb_active")
{$(this).mouseover(function(){$(this).attr("className","gb_active")})};
}
});

$(this).attr("className","gb_active")
$(".gb_relimg_show").attr("src",$(this).attr("rel"));
$(".gb_relimg_show").attr("jqimg",$(this).attr("rel"));

});

$(".jqzoom").jqueryzoom({
xzoom: 400, //zooming div default width(default width value is 200)
yzoom: 400, //zooming div default width(default height value is 200)
offset: 10, //zooming div default offset(default offset value is 10)
position: "right", //zooming div position(default position value is "right")
preload:1,
lens:1
});
});
========================================================
Css
========================================================
.givebest_product_view_prosimg img{
padding:2px;
height:40px;
border:1px #ccc solid;
cursor:pointer;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
.givebest_product_view_prosimg .gb_active img{
border:1px fuchsia solid;
opacity: 1;
-moz-opacity:1;
-khtml-opacity:1;
filter: alpha(Opacity=100)
}
.jqzoom{
border:1px solid black;
float:left;
position:relative;
padding:0px;
cursor:move;
}

.jqzoom img{
float:left;
}


div.zoomdiv {
z-index                 : 10000;
position                : absolute;
top:0px;
left:0px;
width                   : 200px;
height                  : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;


}

div.jqZoomPup {
z-index                 : 1000;
visibility              : hidden;
position                : absolute;
top:0px;
left:0px;
width                   : 50px;
height                  : 50px;
border: 1px solid #aaa;
background: #ffffff url(../images/zoom.gif) 50% top  no-repeat;;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}


========================================================
Html
========================================================

上一篇: 中医秘方
下一篇: 文章中添加关键字链接
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: