jquery蔚蓝网总结三个页面

首先，我总结一下我写的首页的功能和样式。首页是长这样的喔们需要为静态页面设置样式让它动起来。

 

 

当鼠标悬浮在新手入门的时候，下拉框缓缓下拉，当鼠标远离时，下拉框缓缓上升，直至消失。这功能听起来感觉很简单，没错代码也简单。

这一块是让书只在这一个位置。随着页面滚动，他的位置不会发生改变。

 

$("#dd_close").click(function(){//关闭广告
$(this).parent().remove();
});
//右上角的偏移//位置定位
var one=parseInt($("#right").css("top"));
var two=parseInt($("#right").css("left"));

$(window).scroll(function(){//页面改变的方法

var scrollTop=parseInt($(this).scrollTop());
$("#right").offset({top:scrollTop+one});

});

书讯快递的向上滚动

//书讯快递循环垂直向上滚动
function movedome(){
var marginTop=0;//定义一个变量
var stop=false;//设置定时器false;
var interval=setInterval(function(){//开启定时器事件：
if(stop) return;//如果开始就不动：定时器的变量制false;
$("#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":1}).appendTo($("#express"));//追加一个express让他一直循环
marginTop=0;//当值变为0的时候，marginTop变为0，距离
}
}
});
},50);//0.05秒
$("#express").mouseover(function(){//当鼠标移上时
stop=true;//开始停？
}).mouseout(function(){
stop=false;//开始动
});
}
movedome();//走到这个方法就走这，在方法外部定义

让图片变大，缩小

 

 

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);0
}
changeImg();

 

 

 

 

 

 

 

var $getBookList = $('#product_storyList_content').html();//把这个获取到的元素赋值到内存中
//大图模式(从列表的DOM中获取信息)
function getBigBookList() {
var $listBookImg = $(' .product_storyList_content_left');//找寻图书列表
var $contents = "";
$(".product_storyList_content_right").find("ul").each(function (i, e) {//找到ul遍历遍历后
var $content = ["<div class='big_img_list'><ul><li class='bookImg'>" + $listBookImg.eq(i).html() + "</li>"];
var $print = $(e).children("li").eq(6).find('span');//
$content.push("<li><dl><dd>" + $print.eq(1).text() + "</dd><dd class='product_content_delete'>" + $print.eq(2).text() + "</dd><dd>" + $print.eq(0).text() + "</dd>")
$content.push("<li class='detail'>" + $(e).children("li").eq(5).text() + "</li>")//简介
$content.push("<li class='detail'>" + $(e).children("li").eq(2).text() + "</li>")//作者
$content.push("<li class='detail'>" + $(e).children("li").eq(1).text() + "</li>")//顾客评分
$content.push("<li class='detail'>" + $(e).children("li").eq(3).text() + "</li>")//出版时间
$content.push("<li class='detail'>" + $(e).children("li").eq(4).text() + "</li></ul></div>")//出版评分
$contents += $content.join("");//添加到contents
})
return $contents;
}
var $bigBookList = getBigBookList();
//单击列表模式和大图模式进行切换
$('#product_array').children().click(function() {
$(this).addClass("click").siblings().removeClass("click");
//使用attr判断this是列表还是大图
if($(this).attr("name") == "array") {
$('#product_storyList_content').html($getBookList);
} else if($(this).attr("name") == "bigImg") {
$('#product_storyList_content').html($bigBookList);
$("#product_storyList_content").children().find("ul").hover(function() {
$(this).addClass("over");
$(this).parent().addClass("over");
}, function() {
$(this).removeClass("over");
$(this).parent().removeClass("over");
})
}
})
})

购物车页面是个比较棘手的问题。

 

//商品隔行变色
$("#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","pink");
}
});

 

 

//商品总价：

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



//修改数量
$("#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+"元");
});

totalPrice();
//删除商品
$("#myTableProduct").find(".shopping_product_list_6").children("a").click(function(){
if(confirm("您确定要删除商品么？")){
$(this).parent().parent().remove();
totalPrice();
}
});

转载于:https://www.cnblogs.com/hualishu/p/8890313.html