jquery 蔚蓝网页面效果图及代码

$(document).ready(function(){ ???//提交表单 ???$("#registerBtn").click(function(){ ???????var email=document.getElementById("email"); ???????if(email.validity.valueMissing==true){ ???????????email.setCustomValidity("邮箱不能为空"); ???????} ???????else if(email.validity.typeMismatch==true){ ???????????email.setCustomValidity("邮箱格式不正确，例如web@bdqn.cn"); ???????} ???????else{ ???????????email.setCustomValidity(""); ???????} ???????var uName=document.getElementById("nickName"); ???????if(uName.validity.valueMissing==true){ ???????????uName.setCustomValidity("昵称不能为空"); ???????} ???????else if(uName.validity.patternMismatch==true){ ???????????uName.setCustomValidity("昵称必须是4~20位的英文和数字"); ???????} ???????else{ ???????????uName.setCustomValidity(""); ???????} ???????var pwd=document.getElementById("pwd"); ???????if(pwd.validity.valueMissing==true){ ???????????pwd.setCustomValidity("密码不能为空"); ???????} ???????else if(pwd.validity.patternMismatch==true){ ???????????pwd.setCustomValidity("密码必须是6~20位的英文和数字"); ???????} ???????else{ ???????????pwd.setCustomValidity(""); ???????} ???????var repwd=document.getElementById("repwd"); ???????if(repwd.val()==pwd.val()){ repwd.setCustomValidity("");} ???????else{repwd.setCustomValidity("两次输入的密码不一致");} ???}); ???//提交按钮样式变化 ???$("#registerBtn").mouseover(function(){ ???????$(this).attr("src","images/register_btn_over.gif"); ???}).mouseout(function(){ ???????$(this).attr("src","images/register_btn_out.gif"); ???}); ???//省市级联 ???var cityList = new Array(); ???cityList[‘北京市‘] = [‘朝阳区‘,‘东城区‘,‘西城区‘, ‘海淀区‘,‘宣武区‘,‘丰台区‘,‘怀柔‘,‘延庆‘,‘房山‘]; ???cityList[‘上海市‘] = [‘宝山区‘,‘长宁区‘,‘丰贤区‘, ‘虹口区‘,‘黄浦区‘,‘青浦区‘,‘南汇区‘,‘徐汇区‘,‘卢湾区‘]; ???cityList[‘广州省‘] = [‘广州市‘,‘惠州市‘,‘汕头市‘,‘珠海市‘,‘佛山市‘,‘中山市‘,‘东莞市‘]; ???cityList[‘深圳市‘] = [‘福田区‘, ‘罗湖区‘, ‘盐田区‘, ‘宝安区‘, ‘龙岗区‘, ‘南山区‘, ‘深圳周边‘]; ???cityList[‘重庆市‘] = [‘俞中区‘, ‘南岸区‘, ‘江北区‘, ‘沙坪坝区‘, ‘九龙坡区‘, ‘渝北区‘, ‘大渡口区‘, ‘北碚区‘]; ???cityList[‘天津市‘] = [‘和平区‘, ‘河西区‘, ‘南开区‘, ‘河北区‘, ‘河东区‘, ‘红桥区‘, ‘塘古区‘, ‘开发区‘]; ???cityList[‘江苏省‘] = [‘南京市‘,‘苏州市‘,‘无锡市‘]; ???cityList[‘浙江省‘] = [‘杭州市‘,‘宁波市‘,‘温州市‘]; ???cityList[‘四川省‘] = [‘四川省‘,‘成都市‘]; ???cityList[‘海南省‘] = [‘海口市‘]; ???cityList[‘福建省‘] = [‘福州市‘,‘厦门市‘,‘泉州市‘,‘漳州市‘]; ???cityList[‘山东省‘] = [‘济南市‘,‘青岛市‘,‘烟台市‘]; ???cityList[‘江西省‘] = [‘江西省‘,‘南昌市‘]; ???cityList[‘广西省‘] = [‘柳州市‘,‘南宁市‘]; ???cityList[‘安徽省‘] = [‘安徽省‘,‘合肥市‘]; ???cityList[‘河北省‘] = [‘邯郸市‘,‘石家庄市‘]; ???cityList[‘河南省‘] = [‘郑州市‘,‘洛阳市‘]; ???cityList[‘湖北省‘] = [‘武汉市‘,‘宜昌市‘]; ???cityList[‘湖南省‘] = [‘湖南省‘,‘长沙市‘]; ???cityList[‘陕西省‘] = [‘陕西省‘,‘西安市‘]; ???cityList[‘山西省‘] = [‘山西省‘,‘太原市‘]; ???cityList[‘黑龙江省‘] = [‘黑龙江省‘,‘哈尔滨市‘]; ???cityList[‘其他‘] = [‘其他‘]; ???$("#province").append(function(){ ???????var html=""; ???????for (var i in cityList){ ???????????html+="<option value="+i+">"+i+"</option>"; ???????} ???????return $(html); ???}); ???$("#province").change(function(){ ???????var v= $(this).val(); ???????var html=""; ???????if(v=="请选择省/城市"){ ???????????html="<option>请选择城市/地区</option>"; ???????????$("#city").html(html); ???????????return; ???????} ???????var citys=cityList[v]; ???????$.each(citys,function(i,n){ ???????????html+="<option value="+n+">"+n+"</option>"; ???????}); ???????$("#city").html(html); ???});});

$(function($){ ???//打开一个广告窗口 ??window.open(‘open.html‘,‘‘,‘top=0,left=200,width=500,height=327,scrollbars=0,resizable=0‘); ???//随滚动条滚动的可关闭广告窗口 ???$(window).scroll(function(){ ???????var st = $(this).scrollTop()+50; ???????$("#right").css("top",st); ???}); ???$("#right").find("a").click(function(){ ???????$("#right").hide(); ???}); ???//轮换图片 ???function changeImg(){ ???????var index=0; ???????var stop=false; ???????var $li=$("#content").find("#scroll_img").children("li"); ???????var $page = $("#content").find("#scroll_number").children("li"); ???????$page.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over"); ???????$page.mouseover(function(){ ???????????stop=true; ???????????index=$page.index($(this)); ???????????$li.eq(index).stop(true,true).fadeIn().siblings().fadeOut(); ???????????$(this).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over"); ???????}).mouseout(function(){ ???????????stop=false; ???????}); ???????setInterval(function(){ ???????????if(stop) return; ???????????index++; ???????????if(index>=$li.length){ ???????????????index=0; ???????????} ???????????$li.eq(index).stop(true,true).fadeIn().siblings().fadeOut(); ???????????$page.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over"); ???????},3000); ???} ???changeImg(); ???$(".book ul img").mouseenter(function(){ ???????$(this).animate({width:"110%"},"slow"); ???}); ???$(".book ul img").mouseleave(function(){ ???????$(this).animate({width:"80%"},"slow"); ???}); ???//图书畅销榜切换 ???$(".tab ol li:first-of-type").mouseover(function(){ ???????$(".tab ol li:last-of-type").css({"background":"#efefef","border-left":"1px solid #cccccc","border-bottom":"1px solid #ccc","width":"118px"}); ???????$(this).css({"width":"119px","background":"#ffffff","border":"none"}); ???????$(".tab ul:first-of-type").show(); ???????$(".tab ul:last-of-type").hide(); ???}); ???$(".tab ol li:last-of-type").mouseover(function(){ ???????$(".tab ol li:first-of-type").css({"background":"#efefef","border-right":"1px solid #cccccc","border-bottom":"1px solid #ccc","width":"118px"}); ???????$(this).css({"width":"119px","background":"#ffffff","border":"none"}); ???????$(".tab ul:first-of-type").hide(); ???????$(".tab ul:last-of-type").show(); ???}); ???$(".tab ul li p").mouseenter(function(){ ???????$(this).next().show(); ???????$(this).hide(); ???????$(this).parent().siblings().children("p").show().end().children("dl").hide(); ???}) ???//书讯快递循环垂直向上滚动 ???function movedome(){ ???????var marginTop=0; ???????var stop=false; ???????var interval=setInterval(function(){ ???????????if(stop) return; ???????????//children子代选择器 匹配到之后的所有li ?first第一个 ???marginTop ?????????0代表 ???????????$("#express").children("li").first().animate({"margin-top":marginTop--},0,function(){ ???????????????var $first=$(this); ???????????????if(!$first.is(":animated")){ ???????????????????if((-marginTop)>$first.height()){ ???????????????????????$first.css({"margin-top":0}).appendTo($("#express")); ???????????????????????marginTop=0; ???????????????????} ???????????????} ???????????}); ???????},50); ???????$("#express").mouseover(function(){ ???????????stop=true; ???????}).mouseout(function(){ ???????????stop=false; ???????}); ???} ???movedome();});

$(function($){ ???//图书分类动态展示 ???function productList(){ ???????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 html=[]; ???????$.each(list, function(i, n){ ???????????html.push("<li> ·<a href=‘#‘ class=‘blue‘>"+n+"</a></li>"); ???????}); ???????$("#product_catList_class").html(html.join("")); ???} ???productList(); ???//图书动态展示 ???function bookList(){ ???????var catalog=new Array(); ???????catalog[0] = [‘product_list_01.jpg‘,‘私募（首部披露资本博弈秘密的金融小说）‘,4,‘郭现杰‘,‘花山文艺出版社‘, ‘2009年08月‘, ???????????‘数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金—金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金—鑫利投资背信弃义，导致金鼎投资惨败。以至...‘, ???????????‘13.10‘,‘59折‘,‘￥18.90‘,‘￥32.00‘]; ???????catalog[1] = [‘product_list_02.jpg‘,‘圈子圈套.1.战局篇‘,4,‘王强‘,‘清华大学出版社‘, ‘2006年01月‘, ???????????‘虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...‘, ???????????‘￥8.90‘,‘68折‘,‘￥19.10‘,‘￥28.00‘]; ???????var html=""; ???????$.each(catalog,function(i,n){ ???????????html+="<div class=‘product_storyList_content_left‘><img src=images/"+n[0]+" alt=‘图书列表‘></div>"; ???????????html+="<div class=‘product_storyList_content_right‘><ul>"; ???????????html+="<li class=‘product_storyList_content_dash‘><a href=‘#‘ class=‘blue_14‘>"+n[1]+"</a></li>"; ???????????html+="<li>顾客评分："; ???????????for(var k=0;k<5;k++){ ???????????????if(k<n[2]){ ???????????????????html+= "<img src=‘images/star_red.gif‘ alt=‘star‘>"; ???????????????} ???????????????else{ ???????????????????html+= "<img src=‘images/star_gray.gif‘ alt=‘star‘>"; ???????????????} ???????????} ???????????html+="</li>"; ???????????html+="<li>作　者：<a href=‘#‘ class=‘blue_14‘>"+n[3]+"</a> 著</li>"; ???????????html+="<li>出版社：<a href=‘#‘ class=‘blue_14‘>"+n[4]+"</a></li>"; ???????????html+="<li>出版时间："+n[5]+"</li>"; ???????????html+="<li>"+n[6]+"</li>"; ???????????html+="<li> <dl class=‘product_content_dd‘>"; ???????????html+="<dd><img src=‘images/product_buy_02.gif‘ alt=‘shopping‘></dd>"; ???????????html+="<dd><img src=‘images/product_buy_01.gif‘ alt=‘shopping‘></dd>"; ???????????html+="<dd>节省："+n[7]+"</dd>"; ???????????html+="<dd>折扣：<span>"+n[8]+"</span></dd>"; ???????????html+="<dd class=‘footer_dull_red‘><span>"+n[9]+"</span></dd>"; ???????????html+="<dd class=‘product_content_delete‘><span>"+n[10]+"</span></dd>"; ???????????html+="</dl></li></ul></div>"; ???????????html+="<div class=‘product_storyList_content_bottom‘></div>"; ???????}); ???????$("#storyBooksssss").html(html); ???} ???bookList(); ???//获取列表形式List,默认是列表形式，因此先取得列表形式的内容 ???var arrayBookList=$("#product_storyList_content").html(); ???//获取大图形式List ???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; ???} ???var bigBookList=getBigBookList();//获取大图形式List ???//大图列表切换 ???$("#product_array").children("a").click(function(){ ???????if($(this).is("[class=‘click‘]")) return;//如果已经点击那么返回，用class来判断 ???????$(this).siblings().removeClass("click"); ???????$(this).addClass("click"); ???????//用元素的name来判断 ???????if($(this).attr("name")=="array"){//列表 ???????????$("#product_storyList_content").empty().html(arrayBookList); ???????}else{//大图 ???????????$("#product_storyList_content").empty().html(bigBookList); ???????????$("#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"); ???????????}); ???????} ???});});

$(function($){ ???//根据您挑选的商品，当当为您推荐部分的显示和隐藏 ???$("#shopping_commend_arrow").click(function(){ ???????if($("#shopping_commend_sort").css("display")=="none"){ ???????????$(this).attr("src","images/shopping_arrow_up.gif"); ???????}else{ ???????????$(this).attr("src","images/shopping_arrow_down.gif"); ???????} ???????$("#shopping_commend_sort").toggle(); ???}); ???//商品隔行变色 ???$("#myTableProduct").find("tr:odd").css("backgroundColor","#ffebcd"); ???//商品变色 ???$("#myTableProduct").find("tr").mouseover(function(){ ???????$(this).css("backgroundColor","#fff"); ???}).mouseout(function(){ ???????if($("#myTableProduct").find("tr").index($(this))%2==1) {//判断是否奇数行 ???????????$(this).css("backgroundColor","#ffebcd"); ???????}else{ ???????????$(this).css("backgroundColor","#fefbf2"); ???????} ???}); ???//计算总价 ???function totalPrice(){ ???????var percents= 0,prePrices= 0,prices=0;//积分，原价，现价 ???????$("#myTableProduct").find("tr").each(function(i,ele){ ???????????var num=$(ele).find(".shopping_product_list_5").find("input").val();//数量 ???????????percents+=parseInt($(ele).find(".shopping_product_list_2").text())*num; ???????????//解决下js中浮点数的bug问题，因此建议浮点数的运算不要放在前台，这里是指粗略的解决了一下 ???????????var price=parseInt($(ele).find(".shopping_product_list_4").find("label").text().replace(".",""))*num; ???????????prices+=price; ???????????var prePrice=parseInt($(ele).find(".shopping_product_list_3").find("label").text().replace(".",""))*num; ???????????prePrices+=prePrice; ???????}); ???????$("#product_integral").text(percents); ???????$("#product_total").text(prices/100); ???????$("#product_save").text((prePrices-prices)/100); ???????return prices/100; ???} ???totalPrice(); ???//删除商品 ???$("#myTableProduct").find(".shopping_product_list_6").children("a").click(function(){ ???????if(confirm("您确定要删除商品么？")){ ???????????$(this).parent().parent().remove(); ???????????totalPrice(); ???????} ???}); ???//修改数量 ???$("#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("数量不能为空，且只能为正整数"); ???????????$(this).val(1); ???????} ???????var t =totalPrice(); ???????alert("修改成功！，您的商品总金额是"+t+"元"); ???}); ???//清空购物车 ???$("#removeAllProduct").click(function(){ ???????//注意清除的先后顺序 ???????$("#myTableProduct").next().remove(); ???????$("#myTableProduct").remove(); ???????$(".shopping_list_border").append("<div class=‘empty_product‘><div>您还没有挑选商品，<a href=‘index.html‘>去挑选看看>></a></div></div>"); ???});});