打开网站弹出广告代码,建立网站来网上销售的英文,桂林网站建设内容,分销系统模式demo: http://jsbin.com/lihiwigaso 需求: 一个圆分成分部分, 鼠标滑上不同的区域显示不同的颜色 思路: 先判断这个点是否在圆之内, 再判断是否在所在的三角形之内就可以了 所需要的全部源码: !DOCTYPE html
html
headmeta charsetutf-8!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-widthtitlepoint-in-semicircle/titlescript srcjquery-1.7.2.min.js/script
style
body{border:0;margin:0;padding:0;
}
#bottom {position: absolute;left:0px;top:0px;width: 200px;height: 200px;border: 1px solid red;
}#circleProcess {position: relative;top: 0;left: 0;width: 200px;height: 200px;stroke-dasharray: 360%;stroke-dashoffset: 0%;stroke: #6FEC6F;fill: none;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);
}#left {position: absolute;top: 0px;left: 0px;height: 100px;width: 200px;border-radius: 100px 100px 0 0;-moz-border-radius: 100px 100px 0 0;-webkit-border-radius: 100px 100px 0 0;background:red;transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform-origin: 100px 100px;-moz-transform-origin: 100px 100px;-webkit-transform-origin: 100px 100px;display:none;}#right {position: absolute;top: 100px;left: 0px;height: 100px;width: 200px;border-radius: 0 0 100px 100px;-moz-border-radius: 0 0 100px 100px;-webkit-border-radius: 0 0 100px 100px;background:blue;transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform-origin: 100px 0px;-moz-transform-origin: 100px 0px;-webkit-transform-origin: 100px 0px;display:none;
}#top {position: absolute;left: 0px;top: 0px;width: 200px;height: 200px;z-index: 100px;
}/style
/head
body
div idbottom
svg idcircleProcess xmlnshttp://www.w3.org/2000/svg
circle idcircle cx100 cy100 r100 stroke-width5 stroke-dashoffset0%/circle
/svg
div idleft/div
div idright/div
/div
div idtop/div
/body
/html
script
jQuery(function($){var polygons [[[0, 0], [200, 0], [100, 100], [0, 200]],[[100, 100], [200, 0], [200, 200], [0, 200]]];var $left $(#left);var $right $(#right);var $top $(#top);var oldIndex -1;$top.on(mousemove, function(e){if( pointInsideCircle([e.offsetX, e.offsetY],[100, 100], 100) ){var index inside([e.offsetX, e.offsetY], polygons);if(indexoldIndex){return;}if (index 0) {$left.show();$right.hide();}if (index 1) {$left.hide();$right.show();}oldIndex index;} else {$left.hide();$right.hide();oldIndex -1;}});$top.on(mouseleave, function(){$left.hide();$right.hide();oldIndex -1;});function inside(point, polygons){for(var i1; i0; i--){if(pointInsidePolygon(point, polygons[i])){return i;}}return -1;}function pointInsidePolygon(point, vs) {// ray-casting algorithm based on// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.htmlvar x point[0], y point[1];var inside false;for (var i 0, j vs.length - 1; i vs.length; j i) {var xi vs[i][0], yi vs[i][1];var xj vs[j][0], yj vs[j][1];var intersect ((yi y) ! (yj y)) (x (xj - xi) * (y - yi) / (yj - yi) xi);if (intersect) inside !inside;}return inside;}function pointInsideCircle(point, circle, r) {if (r0) return falsevar dx circle[0] - point[0]var dy circle[1] - point[1]return dx * dx dy * dy r * r}});
/script转载于:https://www.cnblogs.com/zlog/p/6109223.html
