仿京东商城商品图片 缩略图+放大镜效果

Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示 第一步:需要导入Jquery包文件和样式文件(放在中间): <%--Jquery基础包 1.2.6版本--%> <%--底部小图左右滚动脚本--%> <%--放大镜效果脚本--%> <%--放大镜效果样式--%> <%-- 底部左右滚动图片样式 此样式表中样式需根据实际需要进行调整 关键的是以下几个样式的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 {} --%> 第二步:添加相关 20989;数方法(放在中间): 第三步:页面中的代码
  • ‘ name=‘<%# Eval("PicBig") %>‘ src=‘<%# Eval("PicBig") %>‘ />
第四步:很重要但很容易忘记的一个地方 在中添加onload="attachImgEventListener()" 此处如果忘记在body中添加onload事件则在页面首次加载时底部小图片上方的大图没有图片,当鼠标移动到小图片上时才会加载 jquery-jCarousel 配置选项 属性 类型 默认值 描述 vertical bool false 指定carousel是水平还是垂直方向滚动。 start integer 1 开始的元素编号。 offset integer 1 初始化后第一个可见的元素编号。 size integer 如果size属性没指定,则为
  • 元素的个数 元素的个数。 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后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。 itemLoadCallback function null 在carousel动态载入内容后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemFirstInCallback function null 当某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的 实例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemFirstOutCallback function null 当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数 的实例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemLastInCallback function null 当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数 的实例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemLastOutCallback function null 当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函 数的实例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemVisibleInCallback function null 当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实 例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } itemVisibleOutCallback function null 当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的 实例对象,
  • 对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } buttonNextCallback function null 当‘next‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘next‘按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。 buttonPrevCallback function null 当‘previous‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘previous‘按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。 buttonNextHTML string
    自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。 buttonPrevHTML string
    自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。 buttonNextEvent string "click" 指定触发next操作的事件名。 buttonPrevEvent string "click" 指定触发prev操作的事件名。
  • posted @ 2013-01-31 09:23  web哓轲  阅读(782)  评论(0编辑  收藏  举报