当当网页面基本动态实现

项目的要求

一.实现无缝滚动（关键代码）本人认为此功能是本网站特效的难点之一

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;}//获取大图形式Listfunction 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");}});}