当前位置：首页 > 网页特效 > 图片特效

基于SVG的多边形图片网格布局

分类：图片特效日期：2024-05-14 点击(0) 评论(0)

基于SVG的多边形图片网格布局

简介

在页面中引入snap.svg。

```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script> 
```                 
#####  CSS样式
添加如下的一些CSS样式：

```html
body {
  margin:0px;
  padding: 0px;
  background-color: #141414;
  overflow: hidden;
}
 
path{
  -webkit-transition:opacity 0.1s;
  cursor:pointer;
  opacity: 0.6;
}
 
path:hover{
  opacity: 1;
}
```
#####  JavaScript
通过下面的js代码来构建多边形网格布局，其中对象team_rwby中放置的是每个多边形的背景图片。

```html
window.onload = function(argument) {
    w = window.innerWidth,
    h = window.innerHeight;
 
    /* svg init */
    var paper = Snap(w, h);
 
    var team_rwby = {
      "ruby": "http://img.hb.aicdn.com/5d85ca4552076e9ebc84c9275794bebc1ce1dbf12498e-qPbnQc_fw658",
      "weiss": "http://img.hb.aicdn.com/ed55102bd05a0c95473cb958747091f2fcb3b98e94c0b-PC5EbL_fw658",
      "blake": "http://img.hb.aicdn.com/4736a6567a20b1c6d8af1ab22d827abd23bd7f044fd95-3dMoyr_fw658",
      "yang": "http://img.hb.aicdn.com/29125306a1a2cfd2d732a54b487d37b7372c36c8692ce-OwTMnW_fw658"
    };
 
    /* this polygons' array include coordinates and image's source  */
    var polygons = [];
    polygons.push({
      "coordinates": [
        [0, 0],
        [w * 0.6, 0],
        [0, h * 0.5]
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.ruby
    }, {
      "coordinates": [
        [0, h * 0.5],
        [w * 0.3, h * 0.25],
        [w * 0.55, h],
        [0, h]
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.yang
    }, {
      "coordinates": [
        [w * 0.3, h * 0.25],
        [w * 0.75, h * 0.55],
        [w * 0.55, h],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.blake
    }, {
      "coordinates": [
        [w * 0.55, h],
        [w, 0],
        [w, h],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.ruby
    }, {
      "coordinates": [
        [w * 0.6, 0],
        [w, 0],
        [w * 0.75, h * 0.55],
        [w * 0.3, h * 0.25],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.weiss
    });
 
    for (var i = 0; i < polygons.length; i++) {
      make_polygon_layout(paper, polygons[i]);
    }
  }
 
  function make_polygon_layout() {
    paper = arguments[0];
    polygon = arguments[1];
    tempA = [];
    for (var i = 0; i < polygon.coordinates.length; i++) {
      tempA[i] = polygon.coordinates[i];
    }
    /* get largest and smallest x coordinate */
    tempA.sort(function(a, b) {
      return a[0] - b[0];
    });
    sX = tempA[0][0];
    bX = tempA[tempA.length - 1][0];
 
    /* get largest and smallest ycoordinate */
    tempA.sort(function(a, b) {
      return a[1] - b[1];
    });
    sY = tempA[0][1];
    bY = tempA[tempA.length - 1][1];
 
    polygon.startPoint = [sX, sY];
    polygon.endPoint = [bX, bY];
 
    polygon.width = polygon.endPoint[0] - polygon.startPoint[0];
    polygon.height = polygon.endPoint[1] - polygon.startPoint[1];
 
    var pattern = paper.image(polygon.image_src, 0, 0, polygon.width, polygon.height)
      .attr("preserveAspectRatio", "xMidYMid slice")
      .pattern({
        'x': polygon.startPoint[0],
        'y': polygon.startPoint[1],
        'width': polygon.width,
        'height': polygon.height
      }).attr('viewBox', "");
 
    var path = paper.path({
      "d": make_path(polygon.coordinates),
      "strokeWidth": polygon.strokeWidth,
      'stroke-linejoin': "round",
      'stroke': polygon.strokeStyle,
      "fill": pattern,
    });
 
    path.click(function(event) {
 
    });
 
  }
 
  function make_path() {
    d = "M";
    coordinates = arguments[0];
    for (var i = 0; i < coordinates.length; i++) {
      if (i == 0) {
        d += coordinates[i][0] + " " + coordinates[i][1]
      } else {
        d += "L" + coordinates[i][0] + " " + coordinates[i][1]
      }
    }
    return d + "z";
  }   
```

web299.com

基于SVG的多边形图片网格布局

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果