项目的要求
一.实现无缝滚动（关键代码）本人认为此功能是本网站特效的难点之一
var setinterval = setInterval(function() {
if (blag)
return;
$("#express").children("li").first().animate({
"margin-top" : num--
}, 0, function() {
var $first = $(this);
if (!$first.is(":animated")) {
if ((-num) > $first.height()) {
$first.css({
"margin-top" : 0
}).appendTo($("#express"));
num = 0;
}
}
});
}, 50);二.实现轮播（关键代码）本人认为此功能是本网站特效的难点之一
var count = $("#content").find("#scroll_img").children("li");
var countent = $("#content").find("#scroll_number").children("li");
countent.eq(index).addClass("scroll_number_over").stop(true, true)
.siblings().removeClass("scroll_number_over");
countent.mouseover(
function() {
flag = true;
index = countent.index($(this));
count.eq(index).stop(true, true).fadeIn().siblings()
.fadeOut();
$(this).addClass("scroll_number_over").stop(true, true)
.siblings().removeClass("scroll_number_over");
}).mouseout(function() {
flag = false;
});
setInterval(function() {
if (flag)
return;
index++;
if (index >=count.length) {
index = 0;
}
count.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
countent.eq(index).addClass("scroll_number_over").stop(true, true)
.siblings().removeClass("scroll_number_over");
}, 3000);function shows() {
$("[alt=arrow]").toggle(function() {
$(this).next().slideDown(1500);
}, function() {
$(this).next().slideUp("slow");
});
}$("#bookTab").children(".book_new").find("[id]").mouseover(
function() {
var id = "#book_" + $(this).attr("id");
$("#bookTab").children(".book_class").find("[id]").hide();
$(this).addClass("book_type_out").siblings().removeClass(
"book_type_out");
$(id).show()
});function dianjitupian() {
$(".right").css("position", "fixed");
$(".dd_close a").click(function() {
$(".dd_close").css("display", "none");
$("#right1").css("display", "none");
});
}
一.实现左侧分类（关键代码）主要思想是把分类的文字存入数组当中，然后遍历成为a标签
function readleft() {
var list = new Array("中国当代小说（13880）", "中国近现代小...（640）", "中国古典小说（1547）",
"四大名著（696）", "港澳台小说（838）", "外国小说（5119）", "侦探/悬疑/推...（2519）",
"惊悚/恐怖（798）", "魔幻（369）", "科幻 （513）", "武侠（574）", "军事（726）",
"情感 （6700）", "社会（4855）", "都市（949）", "乡土（99）", "职场（176）",
"财经（292）", "官场（438）", "历史（1329）", "影视小说（501）", "作品集（2019）",
"世界名著（3273）");
var mydl = $('<dl></dl>');
$('#product_catList_class').append(mydl);
$.each(list, function(i, val) {
$('#product_catList_class dl').append(
'<li>.<a href="#" style="color:red">' + val + '</a></li>');
});
}二.实现大图列表转换（关键代码）本人认为此功能是本网站特效的难点之一
$(function() {
function getBigBookList() {
var $initContent = $("#product_storyList_content");
var $bookImg = $initContent.find(".product_storyList_content_left");
var contents = "";
$initContent
.find(".product_storyList_content_right")
.find("ul")
.each(
function(i, ele) {
var div = "";
var content = [
div,
"<div class='big_img_list'><ul><li class='bookImg'>"
+ $($bookImg[i]).html()
+ "</li>" ];
var $li = $(ele).children("li");
var $price = $($li[6]).find("span");
content
.push("<li><dl><dd class='footer_dull_red'>"
+ $($price[1]).text()
+ "</dd><dd class='product_content_delete'>"
+ $($price[2]).text()
+ "</dd><dd class='footer_dull_red'>"
+ $($price[0]).text()
+ "</dd></dl></li>");//价格
content.push("<li class='detail'>"
+ $($li[5]).html() + "</li>");//简介
content.push("<li class='detail'>"
+ $($li[2]).html() + "</li>");//作 者
content.push("<li class='detail'>"
+ $($li[1]).html() + "</li>");//顾客评分
content.push("<li class='detail'>"
+ $($li[3]).html() + "</li>");//出版社
content
.push("<li class='detail'>"
+ $($li[4]).html()
+ "</li></ul></div>");//出版时间
contents += content.join("");
});
return contents;
}
//获取大图形式List
function datu() {
var bigBookList = getBigBookList();
$("#product_array a").on(
'click',
function() {
$(this).addClass('click').siblings().removeClass();
var result = $(this).text();
if (result == '大图') {
$("#product_storyList_content").empty().html(
bigBookList);
$(".product_storyList_content_right'").addClass(
"big_img_list");
$("#product_storyList_content").children(
".big_img_list").find("ul").mouseover(
function() {
$(this).addClass("over");
$(this).parent().addClass("over");
}).mouseout(function() {
$(this).removeClass("over");
$(this).parent().removeClass("over");
});
} else {
$("#product_storyList_content").empty().html(
arrayBookList);
$(".product_storyList_content_right").removeClass(
"big_img_list");
}
});
}
一.实现表单校验（关键代码）以得到焦点和失去焦点为准
function youxiang() {
var value = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
var email = $("#email").val();
if (value.test(email) == "") {
$("#email_prompt").addClass("register_prompt_error").html(
"电子邮件是必填项，请输入您的Email地址");
return false;
} else {
$("#email_prompt").removeClass().addClass("register_prompt_ok")
.html("");
return true;
}
}
function nicheng() {
var value = /^\w+$/;
var email = $("#nickName").val();
if (value.test(email) == "") {
$("#nickName_prompt").addClass("register_prompt_error").html(
"昵称必须填，请输入昵称");
return false;
} else {
$("#nickName_prompt").removeClass().addClass("register_prompt_ok")
.html("");
return true;
}
}
function mima() {
var value = /[\x21-\x7E]{6,20}/;
var email = $("#pwd").val();
if (value.test(email) == "") {
$("#pwd_prompt").addClass("register_prompt_error").html(
"密码必须填，请输入昵称");
return false;
} else {
$("#pwd_prompt").removeClass().addClass("register_prompt_ok").html(
"");
return true;
}
}
function rmima() {
var pwds = $("#pwd").val();
var rpwds = $("#repwd").val();
if (rpwds =="") {
$("#repwd_prompt").removeClass().addClass("register_prompt_error")
.html("重复密码不能为空，请输入");
return false;
} else {
if (pwds != rpwds) {
$("#repwd_prompt").removeClass().addClass(
"register_prompt_error").html("俩次密码不一致");
return false;
} else {
$("#repwd_prompt").removeClass().addClass("register_prompt_ok")
.html("");
return true;
}
}
}
$(function() {
$("#email").on(
'focus',
function() {
$(this).removeClass().addClass(
"register_input register_input_Focus");
$("#email_prompt").removeClass()
.addClass("register_prompt").html("请输入合法的邮箱！");
});
$("#nickName").on(
'focus',
function() {
$(this).removeClass().addClass(
"register_input register_input_Focus");
$("#nickName_prompt").removeClass().addClass(
"register_prompt").html(
"昵称必须使用大小写英文字母，数字，长度为4-20个字符");
});
$("#pwd").on(
'focus',
function() {
$(this).removeClass().addClass(
"register_input register_input_Focus");
$("#pwd_prompt").removeClass().addClass("register_prompt")
.html("密码必须使用大小写英文字母，数字，长度为6-20个字符");
});
$("#repwd").on(
'focus',
function() {
$(this).removeClass().addClass(
"register_input register_input_Focus");
});
$("#email").on('blur', function() {
return youxiang();
});
$("#nickName").on('blur', function() {
return nicheng();
});
$("#pwd").on('blur', function() {
return mima();
});
$("#repwd").on('blur', function() {
return rmima();
});
});
一.实现打开和收回（关键代码）
$("#shopping_commend_arrow").toggle(function() {
$("#shopping_commend_sort").show(1500);
}, function() {
$("#shopping_commend_sort").hide("slow");
});二.实现清空购物车
function clearcar() {
$('#removeAllProduct')
.on(
'click',
function() {
$('.shopping_product_list').remove();
$(this).remove();
$('#myTableProduct')
.html(
'<img src="images/register_pic_01.gif" /><span><strong>你还没有挑选商品，去挑选<a href="#" style="color:red">看看</a></strong></span>');
$('#product_save').text('');
$('#product_total').text('');
+$('#product_integral').text('');
});
}三.实现删除商品
function deletes() {
var s = $("#myTableProduct").find(".shopping_product_list_6").children("a").click(function(){
$(this).parent().parent().remove();
var len=$("#myTableProduct").find("tr").length;
if(len==0){
$('#myTableProduct').html('<img src="images/register_pic_01.gif" /><span><strong>你还没有挑选商品，去挑选<a href="#" style="color:red">看看</a></strong></span>');
}
jisuan();
});
}四.实现改变数量，计算价格
function jisuan() {
var summer = 0;
var integral = 0;
var rsummer = 0;
$("#myTableProduct").find("tr").each(
function(i, dom) {
//商品数量
var num = $(dom).children('.shopping_product_list_5').find(
'input').val();
//商品小计
var price = num
* $(dom).children('.shopping_product_list_3').find(
"label").text();
//优惠价格
var reprice = num
* $(dom).children('.shopping_product_list_4').find(
"label").text();
//alert(price);
//计算总价
summer += price;
rsummer += reprice;
//alert(summer);
//alert(rsummer);
var s = parseInt(summer);
var ss = parseInt(rsummer);
$("#product_save").text(s - ss);
$('#product_total').text(ss);
//计算积分
integral += $(dom).children('.shopping_product_list_2')
.text()
* num;
$('#product_integral').text(integral);
});
}
function addsum() {
$("#myTableProduct").find(".shopping_product_list_5").children("input")
.change(function() {
var value = $(this).val();
if (value == "" || !(/^[0-9]*[1-9][0-9]*$/.test(value))) {
alert("商品数量不能为1");
$(this).val(1);
} else {
jisuan();
}
});
}function bianse() {
$("#myTableProduct").find("tr:odd").css("backgroundColor", "#ffebcd");
$("#myTableProduct").find("tr").hover(function() {
$(this).css("backgroundColor", "#fff");
}, function() {
if ($("#myTableProduct").find("tr").index($(this)) % 2 == 1) {
$(this).css("backgroundColor", "#ffebcd");
} else {
$(this).css("backgroundColor", "#fefbf2");
}
});
}
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
