一键采集上传常见的细节问题(简单用css和js实现小图片细节的功能，实现原理)

　　一键采集上传常见的细节问题(简单用css和js实现小图片细节的功能，实现原理)

　　在很多电商商品展示页面中，都会出现放大商品详情的功能。这里根据主要原理，简单的使用css和js来实现这个效果：

　　实施原则：

　　1、选择两张内容相同、大小不同的图片，一张是小图，有细节待选，一张是大图，展示细节。

　　2、要显示“小图的哪个细节”，就显示“大图的同一部分的细节”。这里涉及到比例的问题，也就是在小图中，

　　鼠标选择的细节大小和整个小图的纵横比要与大图和大图显示的区域的纵横比一致，这样效果才会真实。

　　如下所示：

　　根据等比例我们可以得到公式： h1/h2 = h3/h4 ; w1/w2 = w3/w4

　　由于在选择的时候图片的长宽已经固定了，所以需要改变的是根据比例改变小图片上浮动层的大小。

　　3、鼠标在小图上移动时，大图按比例在显示区域内移动，从而出现效果。

　　源代码展示：

<p> 1 doctype html>

2

3

4

5

6

7

8

9 自定义图片放大器

10

11

12 *{margin:0;padding:0;}

13

14 #show_bigger_pic{

15 position:absolute;

16 width:800px;

17 height:400px;

18 top:200px;

19 left:200px;

20 }

21 .small_pic_div{

22 width:273px;

23 height:177px;

24 border:1px solid;

25 float:left;

26 position:relative;/* cover:absolute定位使用*/

27 }

28 .big_pic_div{

29 width:273px;

30 height:177px;

31 border:1px solid;

32 float:left;

33 margin-left:10px;

34 display:none;

35 overflow:hidden;

36 }

37 .big_pic_div>img{

38 position:relative;

39 }

40 .cover{

41 width:273px;

42 height:177px;

43 position:absolute;

44 border:1px solid;

45 z-index:2;

46 left:0;

47 top:0;

48 }

49 .float_span{

50 width:80px;

51 height:80px;

52 position:absolute;

53 z-index:1;

54 background:#B2DFEE;

55 opacity:0.5;

56 display:none;

57 border:1px solid;

58 left:0;

59 top:0;

60 }

61

62

63

64

65 function gbc(tparent,tclass){//获取指定父元素的指定类的子元素的函数

66 var allclass=tparent.getElementsByTagName(&#39;*&#39;);

67 var result=[];

68 for (var i=0;i