仿京东商城商品图片 缩略图+放大镜效果
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" />
<%--放大镜效果样式--%>
<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 {}
--%>
第二步：添加相关 20989;数方法（放在<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">
<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">
<!--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>中添加οnlοad="attachImgEventListener()"
此处如果忘记在body中添加onload事件则在页面首次加载时底部小图片上方的大图没有图片，当鼠标移动到小图片上时才会加载
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后调用的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函数(在滚动效果之后)。需要四个参数：调用函数的 实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemFirstInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemFirstOutCallback function null 当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数 的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemFirstOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemLastInCallback function null 当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数 的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemLastInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemLastOutCallback function null 当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函 数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemLastOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemVisibleInCallback function null 当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实 例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemVisibleInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemVisibleOutCallback function null 当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的 实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。
itemVisibleOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
buttonNextCallback function null 当‘next‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘next‘按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonPrevCallback function null 当‘previous‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘previous‘按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonNextHTML string
<div></div>
自动生成的next按钮的HTML标记。如果设置为空，不创建next按钮。
buttonPrevHTML string
<div></div>
自动生成的prev按钮的HTML标记。如果设置为空，不创建prev按钮。
buttonNextEvent string "click" 指定触发next操作的事件名。
buttonPrevEvent string "click" 指定触发prev操作的事件名。
仿京东商城商品图片 缩略图+放大镜效果相关推荐
- 仿手机端京东商城html源码_web前端入门到实战：制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能 一.html代码 已选条件: 品牌: 全部 惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕 戴尔 三星 索尼 东芝 ...
- 利用python爬虫爬取京东商城商品图片
笔者曾经用python第三方库requests来爬取京东商城的商品页内容,经过解析之后发现只爬到了商品页一半的图片.(这篇文章我们以爬取智能手机图片为例) 当鼠标没有向下滑时,此时查看源代码的话,就会 ...
- 仿京东PC网页商品详情的放大镜效果（原理+代码）
实现效果 黑色只不过是转gif出问题而已 准备工作 1. 访问该网址,理解我们要弄的放大镜效果,鼠标经过商品图片,显示一个黄色的放大选区,右边显示该选区的大图. 2. 获取商品图片和商品大图 [摩托罗 ...
- 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
- HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码 学生网页课程设计期末作业下载 商城大学生网页设计制作成 临近期末, ...
- HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码 学生网页课程设计期末作业下载 商城大学生网页设计制作成 临近期末, ...
- HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情 ,等多个页面~特别适合web期末 ...
- 【android】高仿京东商城App，集成react-native热更功能
简介 高仿京东商城项目具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,功能还在持续更新中-如果对你有帮助,给个star 使用kotlin语言开发,项目使用模块化开发,降低 ...
- 高仿京东商城app、集成react-native热更新功能
简介 这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
最新文章
- Java中的static关键字详解
- Linux内核中的进程等待与其实现解析
- UA MATH565C 随机微分方程III Ito积分简介
- mac怎么合并两个容器_PDF怎样合并？在Mac上合并PDF文件的最佳方法
- leetcode-120-三角形最小路径和
- Html5 冒泡排序演示
- LeetCode 2206. 将数组划分成相等数对
- 排序系列之---冒泡排序
- 哪种处理器能跑vs还有oracle,AMD处理器哪个最强 2020AMD处理器性能排行榜
- 狂神SpringBoot静态资源文件
- SPOJ PHT Pigeonhole Tower 预处理+二分 || 找规律
- android 打开屏幕,android打开关闭屏幕
- 鸟哥的linux私房菜-基础学习篇 读书笔记
- java 调用弗雷_JAVA API(一)String类和StringBuffer类
- android 仿微信选取相册_Android类似微信图片选择器
- C语言：数组与指针之 p++ 操作的细节问题（p是指针）
- HCIA 学习笔记 (26-37) 静态路由、RIP、OSPF
- obsidian第三方插件无法加载
- Windows nginx静态资源服务器搭建
- SVG互动排版公众号图文『点击播放GIF与音乐，并展开长图』模板代码