一张大图片有多个小图片

最新推荐文章于 2021-03-16 23:03:52 发布

weixin_30577801

最新推荐文章于 2021-03-16 23:03:52 发布

阅读量880

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zxhh/p/6839843.html

版权

这个页面也是我看到别人的写的，感觉不错，就自己留下了为了以后自己可以容易找到，也希望可以方便到别人。
写这个页面
需要注意的是：
1.写每一个小图片的位置时候，要用id,这样等级就高了，不然不起作用。
2.因为每个图片的大小位置距离是差不多的。加入是30px, 那么第一个位置就是（-20px，-20px），因为位置是从（0,0）左上开始的，现在平移是  往右下走，就好比第四象限，按（-20n  px, - 20n  px）走。
3.引入的这个图片是一样的只是颜色不一样，都放到父级里，一个是现在的状态，一个是鼠标划过的状态，位置都不用变就可以换图片了。
 
<!doctype html>
 
  <html lang= 
  "en" 
  > 
 
  <head> 
 
  <meta charset= 
  "UTF-8" 
  > 
 
  <title>背景background-position切图</title> 
 
  <style> 
 
  .showImage{ 
 
  background-image 
  :  
  url 
  ( 
  9 
  pic 
  2 
  .jpg); 
 
  width 
  :  
  100px 
  ; 
 
  height 
  :  
  100px 
  ; 
 
  } 
 
  .showImage<a href= 
  "javascript:;"  
  target= 
  "_blank"  
  class= 
  "baidu-highlight" 
  >:hover</a>{ 
 
  background-image 
  :  
  url 
  ( 
  9 
  pic 
  1 
  .jpg); 
 
  } 
 
  ul{ 
 
  <a href= 
  "javascript:;"  
  target= 
  "_blank"  
  class= 
  "baidu-highlight" 
  >list-style</a>:  
  none 
  ; 
 
  } 
 
  ul li{ 
 
  float 
  :  
  left 
  ; 
 
  margin 
  :  
  20px 
  ; 
 
  } 
 
  #item 
  1 
  { 
 
  background-position 
  :  
  0  
  0 
  ; 
 
  } 
 
  #item 
  2 
  { 
 
  background-position 
  :  
  -100px  
  0 
  ; 
 
  } 
 
  #item 
  3 
  { 
 
  background-position 
  :  
  -200px  
  0 
  ; 
 
  } 
 
  #item 
  4 
  { 
 
  background-position 
  :  
  0  
  -100px 
  ; 
 
  } 
 
  #item 
  5 
  { 
 
  background-position 
  :  
  -100px  
  -100px 
  ; 
 
  } 
 
  #item 
  6 
  { 
 
  background-position 
  :  
  -200px  
  -100px 
  ; 
 
  } 
 
  #item 
  7 
  { 
 
  background-position 
  :  
  0  
  -200px 
  ; 
 
  } 
 
  #item 
  8 
  { 
 
  background-position 
  :  
  -100px  
  -200px 
  ; 
 
  } 
 
  #item 
  9 
  { 
 
  background-position 
  :  
  -200px  
  -200px 
  ; 
 
  } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "container" 
  > 
 
  <ul> 
 
  <li id= 
  "item1"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item2"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item3"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item4"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item5"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item6"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item7"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item8"  
  class= 
  "showImage" 
  ></li> 
 
  <li id= 
  "item9"  
  class= 
  "showImage" 
  ></li> 
 
  </ul> 
 
  </div> 
 
  </body> 
 
  </html>