当当网页面基本动态实现

项目的要求

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

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"); } }); }