最近准备做一个简单的开源的商城系统，因为自己一个人做呢，然后没有美工，这个怎么办？ 所以我采用了流行的 bootstrap 框架来做，后台的话采用的也是一个基于 bootstrap 的一个后台框架系统 前台即将要使用到的技术：jquery + bootstrap+angularjs 等 后台即将要使用到的技术：php+mysql+memecache（基于新浪 sae 博主没有自己的服务器，所以只能使用第三方的 memecache 服务器 然后 php 端使用 curl 进行通信获取数据）+bootstrap +angularjs+jquery +thinkphp 在做前台商城商品展示页面的时候我本来想显示图片就够了 但是这样怎么能行 为了巩固自己的知识 以及 js 基础 决定做一个仿照凡客诚品的一个放大镜效果。 这其中需要了解的就是 jquery 中 width innerWidth outerWidth 这三者的关系 已经鼠标事件的一些个属性比如 pageX pageY clientX clientY 的使用 （后面也可以考虑使用 offset） 这个放大镜效果在 bootstrap 的环境下 我已经做了移动端的处理 移动端我们也可以使用这个放大效果 （主要使用到的移动端事件 touchstart touchmove touchend 这里面还是用到移动端事件的多点触控的属性 event.touches 这是一个数组 当 用户使用多指操作的时候就会有多个数组元素 分别表示每个手指的触控事件 都有 pageX pageY 等属性） 先上一个效果图： 
具体代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| //这里是放大镜效果 支持移动端
var bigView = (function(jQuery){
//当图片加载完以后再进行下面操作
var img = new Image();
var imgsrc = $('.img-thumbnail').data('src');
img.src = imgsrc;
//需要等到图片加载完以后进行其它初始化操作
img.onload=function(){
$('.lk-goods-big-view img').css({
width:img.width *2,
height:img.height *2
});
//放大镜效果
var winselector = $('.lk-winSelector');
var winWidth = winselector.width();
var winHeight = winselector.height();
var imgthumbnail = $('.img-thumbnail');
var imgbigview = $('.lk-goods-big-view');
//获取paddingLeft
var imgHeight = imgthumbnail.height() ;
var imgWidth = imgthumbnail.width();
var viewWidth = viewHeight = height = null;//IE加载后才能得到 大图宽度 大图高度 大图视窗高度
function onthubnailOver(event){
if(winselector.css('display') === 'none'){
winselector.show();
imgbigview.show();
}
winselector.css(fixedPosition(event));
event.stopPropagation();
}
function onthubnailOut(event){
if(winselector.css('display') !== 'none'){
winselector.hide();
imgbigview.hide();
}
event.stopPropagation();
}
function fixedPosition(event){
if(event == null){
return;
}
var X= 0,Y=0;
//判断是不是移动端
if(event.touches){
event = event.touches[0];
//改变预览窗口
$(".lk-goods-big-view").css({
left:0,
top:150
});
}
X = event.pageX - imgthumbnail.offset().left - winWidth/2;
Y = event.pageY - imgthumbnail.offset().top - winHeight/2;
X = X < 0 ? 0 : X;
Y = Y < 0 ? 0 : Y;
//还有就是不能够超出规定的图片区域
X = (X+winWidth>imgWidth) ? (imgWidth-winWidth):X;
Y = (Y+winHeight>imgHeight) ? (imgHeight-winHeight):Y;
if(viewWidth == null){
viewWidth = $('.lk-goods-big-view img').width();
viewHeight = $('.lk-goods-big-view img').height();
$('.lk-goods-big-view').css({
width:(winWidth*viewWidth/imgWidth)+'px',
height:(winHeight*viewHeight/imgHeight)+'px'
});
}
var scrollX = X * (viewWidth/imgWidth);
var scrollY = Y * (viewHeight/imgHeight);
$(".lk-goods-big-view img").css({ "left": scrollX * -1, "top": scrollY * -1 });
return {left:X,top:Y};
}
//判断是不是移动端
var userAgent = navigator.userAgent;
//console.log(typeof userAgent);
var pattern= new RegExp('/AndroidBlackBerryiPhoneiPadiPodIEMobile/i');
if(pattern.test(userAgent)){
$('.img-thumbnail').get(0).addEventListener('touchstart',onthubnailOver);
$('.lk-winSelector').get(0).addEventListener('touchmove',onthubnailOver);
$('.lk-winSelector').get(0).addEventListener('touchend',onthubnailOut);
}else{
$('.img-thumbnail').mouseover(onthubnailOver); //中图事件
$('.lk-winSelector,.img-thumbnail').mousemove(onthubnailOver).mouseout(onthubnailOut); //选择器事件
}
}
})();
|
wechat
alipay
