当当网页面基本动态实现

项目的要求

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

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

	}




  • 12
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值