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();//走到这个方法就走这，在方法外部定义

让图片变大，缩小

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

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

更多相关文章

随机推荐