jquery版购物车源代码

shop.jsp页面代码和CSS代码在上课的时间已经下发,就不重复发了

效果图:

鼠标移入图片时可以浏览大图

// JavaScript Document

$(function() {

//计算并显示总价

calTotal();

//删除

var delUlId;//保存要删除的无序列表的id属性值

//单击“删除”链接

$(".btnDel").click(function(){

showMask();//显示透明度是30%的遮罩层

setDialog();//设置提示框出现的位置

$(".dialog").show();//显示提示框

delUlId=$(this).parents("ul").attr("id"); //获取元素的祖先元素后,保存要删除的员工所在行的id属性值

});

//单击提示框的关闭图片和取消按钮

$("#closePic,#btnCancel").click(function(){

$("div.dialog").hide();//提示框关闭

$("div.mask").hide(); //遮罩层关闭

});

//单击提示框的确定

$("#btnSure").click(function(){

});

/*

* 练习2:购物车商品图片缩放

*/

});

// 自定义设置对话框的位置

function setDialog(){

var $wObj=$(window);//当前浏览器窗口

var $dObj=$("div.dialog");//当前提示框

var widW=$wObj.width();//当前浏览器窗口的宽度

var widH=$wObj.height();//当前浏览器窗口的高度

var diaW=$dObj.width(); //提示框的宽度

var diaH=$dObj.height();//提示框的高度

//计算提示框居中时的左边距

var left=(widW-diaW)/2;

//计算提示框居中时的上边距

var top=(widH-diaH)/2;

$dObj.css({"left":left,"top":top});

}

function showMask() {

var bh = $("body").height(); //获取页面内容的高度

var bw = $("body").width();//获取页面内容的宽度

$("div.mask").css({

height: bh + "px", //设置遮罩层的高度,覆盖整个页面内容

width: bw + "px",

display: "block"

});

}

//算总价

function calTotal(){

}

本文来自企鹅号 - 花飞扬媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

30680
来自专栏梧雨北辰的开发录

iOS开发中设置圆角的方法

设置圆角的效果图: ? 方法一:使用代码设置 //第一步设置圆角的大小 //如果是设置为视图的高度的一半,则为半圆弧 _circleBtn.layer.corn...

37170
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

43660
来自专栏DannyHoo的专栏

设置导航栏的背景色和标签栏的背景色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

27420
来自专栏web前端-

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

77830
来自专栏十月梦想

bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

11140
来自专栏每日一篇技术文章

weex-19-refresh组件

17110
来自专栏韦弦的偶尔分享

微信小程序仿APP section header 悬停效果

在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离

44810
来自专栏刘望舒

React Native组件(二)View组件解析

前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。 1.概述...

32260
来自专栏lonelydawn的前端猿区

keyframes在不同浏览器中的表现性

一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selecto...

42060

扫码关注云+社区

领取腾讯云代金券