jquery代码
$(function(){
showhide();
hoverSubMenu();
search();
share();
address();
clickTabs();
hoverMiniCart();
clickProductTabs();
moveMiniImg();
hoverMiniImg();
bigImg();
function bigImg(){
var $mediumImg = $('#mediumImg');
var $mask = $('#mask');
var $maskTop = $('#maskTop');
var $largeImgContainer = $('#largeImgContainer');
var $loading = $('#loading');
var $largeImg = $('#largeImg');
var maskWidth = $mask.width();
var maskHeight = $mask.height();
var maskTopWidth = $maskTop.width();
var maskTopHeight = $maskTop.height();
$maskTop.hover(function() {
$mask.show();
var src = $mediumImg.attr('src').replace('-m', '-l');
$largeImg.attr('src', src);
$largeImgContainer.show();
$largeImg.on('load', function(){
var largeWidth = $largeImg.width();
var largeHeight = $largeImg.height();
$largeImgContainer.css({
width:largeWidth/2,
height:largeHeight/2
})
$largeImg.show();
$loading.hide();
console.log($largeImg.width(), $largeImg.height());
$maskTop.mousemove(function(event) {
var left = 0;
var top = 0;
var eventLeft = event.offsetX;
var eventTop = event.offsetY;
left = eventLeft - maskWidth/2;
top = eventTop - maskHeight/2;
if(left < 0){
left = 0;
}else if(left > maskTopWidth-maskWidth){
left = maskTopWidth-maskWidth;
}
if(top < 0){
top = 0;
}else if(top > maskTopHeight-maskHeight){
top = maskTopHeight-maskHeight;
}
$mask.css({left:left,top:top});
left = -left * largeWidth / maskTopWidth;
top = -top * largeHeight / maskTopHeight;
$largeImg.css({left:left, top:top});
});
})
}, function() {
$mask.hide();
$largeImgContainer.hide();
$largeImg.hide();
});
}
function hoverMiniImg(){
$('#icon_list>li').hover(function() {
var $img = $(this).children();
$img.addClass('hoveredThumb');
var src = $img.attr('src').replace('.jpg', '-m.jpg');
$('#mediumImg').attr('src', src);
}, function() {
$(this).children().removeClass('hoveredThumb');
});
}
function moveMiniImg(){
var $as = $('#preview>h1>a');
var $backward = $as.first();
var $forward = $as.last();
var $ul = $('#icon_list');
var SHOW_COUNT = 5;
var imgCount = $ul.children('li').length;
var moveCount = 0;
var liWidth = $ul.children(':first').width();
if(imgCount>SHOW_COUNT){
$forward.attr('class', 'forward');
}
$forward.click(function() {
if(moveCount===imgCount-SHOW_COUNT){
return;
}
moveCount++;
$backward.attr('class', 'backward');
if(moveCount===imgCount-SHOW_COUNT){
$forward.attr('class', 'forward_disabled');
}
$ul.css({left:-moveCount * liWidth})
});
$backward.click(function() {
if(moveCount===0){
return;
}
moveCount--;
$forward.attr('class', 'forward');
if(moveCount===0){
$backward.attr('class', 'backward_disabled');
}
$ul.css({left:-moveCount * liWidth})
});
}
function clickProductTabs(){
var $lis = $('#product_detail>ul>li');
var $contents = $('#product_detail>div:gt(0)');
$lis.click(function() {
$lis.removeClass('current');
this.className = 'current';
var index = $(this).index();
$contents.hide();
$contents.eq(index).show();
});
}
function hoverMiniCart(){
$('#minicart').hover(function() {
this.className = 'minicart';
$(this).children(':last').show();
}, function() {
this.className = '';
$(this).children(':last').hide();
});
}
function clickTabs(){
$('#store_tabs>li').click(function() {
$('#store_tabs>li').removeClass('hover');
$(this).addClass('hover');
});
}
function address(){
$select = $('#store_select');
$select.hover(function() {
$(this).children(':gt(0)').show();
}, function() {
$(this).children(':gt(0)').hide();
})
.children(':last')
.click(function() {
$select.children(':gt(0)').hide();
});
}
function share(){
var isOpen = false;
var $shareMore = $('#shareMore');
var $parent = $shareMore.parent();
var $as = $shareMore.prevAll('a:lt(2)');
var $b = $shareMore.children();
$shareMore.click(function() {
if(isOpen){
$parent.css('width', 155);
$as.hide();
$b.removeClass('backword');
}else{
$parent.css('width', 200);
$as.show();
$b.addClass('backword');
}
isOpen = !isOpen;
});
}
function search(){
$('#txtSearch')
.on('focus keyup', function() {
var txt = this.value.trim();
if(txt){
$('#search_helper').show();
}
})
.blur(function() {
$('#search_helper').hide();
});
}
function hoverSubMenu(){
$('#category_items>div').hover(function() {
$(this).children(':last').show();
}, function() {
$(this).children(':last').hide();
});
}
function showhide(){
$('[name=show_hide]').hover(function() {
var id = this.id + '_items';
$('#'+id).show();
}, function() {
var id = this.id + '_items';
$('#'+id).hide();
});
}
})
