摘要：21世纪互联网技术的不断发展，人类社会越来越离不开对互联网的运用。而互联网技术不是漫无目的的发展，是根据人类社会需求指引的方向。前端技术HTML5技术的出现，用户在视觉体验方面有了更高的要求，通过HTML、CSS3和JavaScript技术能够在网页上呈现各式各样酷炫的特效以及功能。

本次论文主要运用HTML、CSS3和JavaScript技术，实现电商网站上的图片放大和裁剪的特效。HTML主要实现基本的静态界面；CSS是对静态页面的元素修饰样式，满足客户的视觉体验；JavaScript主要实现一些元素的动态的功能变化。

第一部分主要是对课题的研究背景做出阐述。第二部分是介绍部分的相关技术和开发环境。第三部分为本次论文的核心，代码的设计实现，图片的放大效果核心在于原始图片大小的压缩；图片的裁剪效果核心在于clip这个CSS3属性。

第四部分是对完成好的设计作品做测试以及检查是否存在bug。

通过对HTML、CSS和JS的学习，完成了此次毕业设计作品，并通过测试达到预期的目标。

关键词: HTML5- CSS3-JavaScript  放大 裁剪

目录

摘要

ABSTRACT

1 引言-1

1.1互联网的发展-1

1.2 设计背景-1

1.3 设计意义-1

2 开发环境简介-3

2.1 HTML5的出现-3

2.2 CSS3简介-4

2.3 开发工具简介-5

2.4 jQuery插件简介-5

2.5 JS简介-5

3 作品分析与实现-7

3.1作品分析-7

3.2 图片裁剪效果分析与实现-8

3.3 图片放大效果分析与实现-13

4 作品测试-18

4.1测试环境-18

4.2测试过程-18

5结论-23

参考文献-24

致谢-25