ASP.Net中Jquery实现图片缩略图左右滚动效果和鼠标当前选中缩略图的放大镜效果
Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示
第一步:需要导入Jquery包文件和样式文件(放在<head></head>中间):
<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
<%--Jquery基础包 1.2.6版本--%>
<script src="jquery/jquery.jcarousel.js" type="text/javascript"></script>
<%--底部小图左右滚动脚本--%>
<script src="jquery/jquery.jqzoom.js" type="text/javascript"></script>
<%--放大镜效果脚本--%>
<link href="Style/jqzoom.css" rel="stylesheet" type="text/css" />
<%--放大镜效果样式
将鼠标移动到需要放大图片上时显示的样式(左图灰白底色的地方)可通过重写 .bigimg和.jqZoomPup两样式来控制,如:
.bigimg
{
width: 800px;
height: 600px;
}
.jqZoomPup
{
z-index: 10;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #FEDE4F 50% top no-repeat;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
cursor:
--%>
<link href="Style/jcarousel.css" rel="stylesheet" type="text/css" />
<%--底部左右滚动图片样式 此样式表中样式需根据实际需要进行调整
关键的是以下几个样式的width,height,padding,margin的数值
.jcarousel-skin-tango .jcarousel-container-horizontal {}
.jcarousel-skin-tango .jcarousel-container-vertical {}
.jcarousel-skin-tango .jcarousel-clip-horizontal {}
.jcarousel-skin-tango .jcarousel-clip-vertical {}
--%>
第二步:添加相关函数方法(放在<head></head>中间):
<script type="text/javascript">
//作为页面onload事件当页面加载时将底部小图片加载到上面大的div中
function attachImgEventListener() {
var imageArray = document.getElementById("mycarousel").getElementsByTagName("img");
if (imageArray.length == 0) {
document.getElementById("PicBig").src = "Image/Blank.gif";
document.getElementById("Product_BigImage").jqimg = document.getElementById("PicBig").src;
document.getElementById("Product_LittleImage").style.display = "none";
}
else {
document.getElementById("PicBig").src = imageArray[0].src;
document.getElementById("PicBig").jqimg = imageArray[0].src;
}
}
</script>
<script type="text/javascript">
//加载底部左右滚动小图片
function mycarousel_initCallback(carousel) {
$("#mycarousel li").mouseover(function() {
$("#Product_BigImage img")[0].src = this.getElementsByTagName("img")[0].name;
$("#Product_BigImage img")[0].jqimg = this.getElementsByTagName("img")[0].name;
$(this).siblings().each(function() {
this.getElementsByTagName("img")[0].className = "";
})
this.getElementsByTagName("img")[0].className = "curr";
})
};
//图片放大的相关方法和参数
$(document).ready(function() {
$(".jqzoom").jqueryzoom({
xzoom: 280, // 放大图的宽
yzoom: 220, // 放大图的高
offset: 10, // 放大图距离原图的位置
position: 'right', // 放大图在原图的右边(默认为right)
lens: 1
});
//底部小图片滚动函数 详细参数说明见底部
jQuery("#mycarousel").jcarousel({
initCallback: mycarousel_initCallback
});
});
</script>
第三步:页面中的代码
<div style="float: left; width:282px">
<!--此div中class必须为jqzoom-->
<div id="Product_BigImage" class="jqzoom">
<img id="PicBig" name="PicBig" style="width: 280px; height: 220px" />
</div>
<div id="Product_LittleImage" style="float: left;">
<!--此ul中id必须为mycarousel, class可根据实际需要在jcarousel.css中调整-->
<ul id="mycarousel" class="jcarousel-skin-tango jcarousel-container-horizontal">
<!--Repeater控件在后台绑定数据,此例中PicBig字段为图片地址-->
<asp:Repeater runat="server" ID="PicList">
<ItemTemplate>
<li>
<img id='<%# Eval("PicBig") %>' name='<%# Eval("PicBig") %>' src='<%# Eval("PicBig") %>' />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
第四步:很重要但很容易忘记的一个地方
在<body>中添加onload="attachImgEventListener()"
此处如果忘记在body中添加onload事件则在页面首次加载时底部小图片上方的大图没有图片,当鼠标移动到小图片上时才会加载
|
我是一只IT小小鸟 | |
25.0元 | ![]() |
|
数据库原理与应用(第二版) | |
22.4元 | ![]() |
jquery-jCarousel 配置选项
属性 | 类型
|
默认值 | 描述 |
---|---|---|---|
vertical | bool | false | 指定carousel是水平还是垂直方向滚动。
|
start | integer | 1 | 开始的元素编号。 |
offset | integer | 1 | 初始化后第一个可见的元素编号。 |
size | integer | 如果size属性没指定,则为<li>元素的个数 | 元素的个数。 |
scroll | integer | 3 | 每次滚动切换的元素数量。 |
visible | integer | null | 如果设置此项,元素的宽度和高度值将根据区域的宽度和高度值来重新计算,以显示此数量的元素。 |
animation | mixed | "fast" | 滚动效果的速度("slow"或者"fast"),也可以是毫秒的整数(参见 jQuery Documentation)。如果设置为0,关闭切换效果。 |
easing | string | null | 你想使用的缓冲效果的名字 (参见 jQuery Documentation). |
auto | integer | 0 | 指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。 |
wrap | string | null | 表示是否将第一个和最后一个元素实现连接效果。选项值可以是
"first" , "last" 或者 "both" 。如果设置为 null ,默认关闭连接效果。你也可以设置 "circular"选项实现循环效果。 例子 Circular carousel 演示如何实现此效果。 |
initCallback | function | null | 在初始化carousel后调用的JavaS |
itemLoadCallback | function | null | 在carousel动态载入内容后调用的JavaS
itemLoadCallback: { on on } |
itemFirstInCallback | function | null | 当某个元素成为carousel显示范围的第一个元素时调用的JavaS
itemFirstInCallback: { on on } |
itemFirstOutCallback | function | null | 当某个元素不再是carousel显示范围的第一个元素时调用的JavaS
itemFirstOutCallback: { on on } |
itemLastInCallback | function | null | 当某个元素成为carousel显示范围的最后一个元素时调用的JavaS
itemLastInCallback: { on on } |
itemLastOutCallback | function | null | 当某个元素不再是carousel显示范围的最后一个元素时调用的JavaS
itemLastOutCallback: { on on } |
itemVisibleInCallback | function | null | 当某个元素成为carousel显示范围的某个元素时调用的JavaS
itemVisibleInCallback: { on on } |
itemVisibleOutCallback | function | null | 当某个元素不再是carousel显示范围的某个元素时调用的JavaS
itemVisibleOutCallback: { on on } |
buttonNextCallback | function | null | 当'next'按钮状态改变时调用的JavaS |
buttonPrevCallback | function | null | 当'previous'按钮状态改变时调用的JavaS |
buttonNextHTML | string |
<div></div> |
自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。 |
buttonPrevHTML | string |
<div></div> |
自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。 |
buttonNextEvent | string | "click" | 指定触发next操作的事件名。 |
buttonPrevEvent | string | "click" | 指定触发prev操作的事件名。 |