angular+underscore+hammer实现太阳花取色器酷炫效果代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：angular+underscore+hammer实现太阳花取色器酷炫效果代码，点击色卡进行选择。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @charset "UTF-8";
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
    
    [tap] {
      cursor: pointer;
    }
    
    .fg-light {
      color: #FFF;
    }
    
    .fg-dark {
      color: #363639;
    }
    
    .canvas {
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      z-index: 1;
      flex: 4;
      font-size: 1.3vmin;
      transition: 1.5s ease-in-out;
      cursor: default;
    }
    
    .dial {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      flex: none;
      background-image: radial-gradient(circle at 50% 50%, #fff, #000);
      mix-blend-mode: overlay;
    }
    
    .color-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      font-size: 1.35em;
    }
    .color-display a {
      text-decoration: none;
      color: inherit;
    }
    
    .color-brick {
      border-radius: 50%;
      flex: 0 0 auto;
      padding: 0;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      box-shadow: 1.5em 0 2.5em -2em rgba(0, 0, 0, 0.65);
    }
    .color-brick.current::after {
      content: "";
      font-family: FontAwesome;
      font-size: 4.5vmin;
      position: absolute;
      top: 1em;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .color-ring-outer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateZ(0);
    }
    
    .color-ring {
      position: relative;
      width: 35em;
      height: 35em;
      pointer-events: none;
      border-radius: 100%;
      overflow: visible;
      transform-origin: 50% 50%;
      line-height: 0;
      transition: transform 0.3s ease-out;
    }
    .color-ring > div {
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
      position: absolute;
      top: -12vmin;
      right: 50%;
      bottom: 50%;
      left: 50%;
      transform-origin: center bottom;
      transform: rotate(180deg);
      transition: transform 0.3s ease-out, top 0.3s ease-out;
    }
    .color-ring > div:nth-last-child(-n+2) {
      transition: none;
    }
    .color-ring > div:last-child {
      transform-origin: right bottom;
    }
    .color-ring > div:last-child .color-brick {
      pointer-events: none;
      border-radius: 0 100% 10%/20% 55%;
      box-shadow: 0.7em 1em 1.5em -1em rgba(0, 0, 0, 0.65);
    }
    .color-ring > div:last-child .color-brick::after {
      left: 0;
    }
    
    .color-info {
      position: relative;
      width: 13em;
      height: 13em;
      text-align: center;
      font-size: 2.1em;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      transition: background 0.3s ease-out;
      box-shadow: 0 0.5em 4em -1em rgba(0, 0, 0, 0.9);
      border-radius: 100%;
    }
    .color-info > * + * {
      margin: 0;
    }
    
    html, body {
      margin: 0;
      height: 100%;
      display: flex;
      flex: 1;
      font-family: "DIN Alternate", monospace;
    }
    
    .panel {
      position: relative;
      flex: 1;
      padding: 0.5em;
      line-height: 1;
      background: #FFF;
      color: #363639;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 1.5em;
      box-shadow: 0 0 2em -1em #363639;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    .panel > div {
      flex: 1;
      text-align: center;
    }
    .panel .button {
      text-decoration: none;
      display: inline-block;
      white-space: nowrap;
      padding: 0.5em;
      border-radius: 0.25em;
      transition: 0.3s ease-out;
    }
    .panel .button:hover {
      box-shadow: 0 0.5em 1em -0.8em #363639;
      transform: scale(1.05);
    }
    .panel textarea {
      width: 100%;
      height: 4.5em;
      padding: 0.5em;
      margin: 1em 0;
      border: 1px solid #c3c3c4;
      border-radius: 0.25em;
      font-size: 1em;
      resize: vertical;
    }
    .panel textarea:focus {
      outline: none;
    }
    
    .love.fg-dark {
      -webkit-text-stroke: 0.05em #363639;
    }
    .love.fg-light {
      -webkit-text-stroke: 0.05em #FFF;
    }
    
    .button.fg-dark {
      border: 0.1em solid #363639;
    }
    .button.fg-light {
      border: 0.1em solid #FFF;
    }
    
    @media screen and (max-width: 40em), screen and (orientation: portrait) {
      body {
        flex-direction: column-reverse;
      }
    
      .canvas {
        flex: 1;
      }
    
      .panel {
        flex: 0 0 auto;
        flex-direction: row;
      }
      .panel textarea {
        flex: 1;
        margin: 0 1em;
        height: auto;
      }
      .panel .love, .panel .button {
        flex: 0 0 auto;
      }
    
      .color-ring {
        width: 24em;
        height: 24em;
      }
      .color-ring > div {
        top: -15vmin;
      }
    
      .color-info {
        width: 12em;
        height: 12em;
      }
    }
    </style>

</head>


<body class="ng-cloak" ng-app="app" ng-controller="appController">
    <div class="canvas" ng-style="{'background-color': color}">

        <div class="dial"></div>
        <div class="color-display" ng-class="setClasses(color, null, true)">

            <div class="color-ring-outer">
                <div class="color-ring" ng-style="setRingRotation()">
                    <div ng-repeat="c in shades track by $index" ng-style="setRotation($index)">
                        <div class="color-brick" tap="doIt(c)" ng-class="setClasses(c, color, false)" ng-style="{'backgroundColor': c}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="color-info" ng-class="setClasses(tuner.hex, null, true)" ng-style="{'background': tuner.hex}">
                <h1>{{tuner.hex}}</h1>
                <div class="refresh" tap="doIt()"><i class="fa fa-refresh fa-3x fa-fw"></i></div>
            </div>

        </div>
    </div>

  

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-1.4.6.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/underscore.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script>
        (function($angular, _, Hammer) {
    	'use strict';
    	
    	$angular
    	.module('app', [])
    	.controller('appController', ['$scope', '$document', 'ColorService', 'UiHelpers', function($scope, $document, colors, ui) {
    
    		$scope.colorSteps = 6;
    		$scope.defaultColor = '#0ebeff';
    		$scope.hash = window.location.hash ? window.location.hash.replace('/', '') : $scope.defaultColor;
    
    		window.addEventListener('hashchange', function(e){
    			var color = '#' + e.newURL.split('#')[1];
    			if(color !== $scope.color) {
    				doIt(color);
    			}
    		});
    
    		var _notInRunLoop = function _notInRunLoop() {
    			return !$scope.$root.$$phase;
    		};
    
    		var doIt = function(color){
    			if(!color || color === '#') {
    				color = colors.randomHex();
    			}
    			color = colors.toHex(color).toLowerCase();
    
    			var cb = colors.brightness(color);
    			var darker = [];
    			_.times(50, function(n){
    				if(n % $scope.colorSteps === 0) {
    					var dn = colors.darken(color, n);
    					if(dn !== '#000000') {
    						if(cb < $scope.colorSteps) {
    							darker.push(dn);
    						} else {
    							if(cb - colors.brightness(dn) > $scope.colorSteps) {
    								darker.push(dn);
    							}
    						}
    					}
    				}
    			});
    
    			var lighter = [];
    			_.times(50, function(n){
    				if(n % $scope.colorSteps === 0) {
    					var c = 50 - n;
    					var ln = colors.lighten(color, c);
    					if(ln !== '#ffffff') {
    						lighter.push(ln);
    					}
    				}
    			});
    
    			$scope.darker = _.unique(darker);
    			$scope.lighter = _.unique(lighter);
    
    			// edges
    			$scope.lightest = _.first($scope.lighter);
    			$scope.darkest = _.last($scope.darker);
    			// middles
    			$scope.lightish = $scope.lighter.length > 2 ? $scope.lighter[$scope.lighter.length-3] : color;
    			$scope.darkish = $scope.darker.length > 2 ? $scope.darker[2] : color;
    
    			$scope.shades = _.unique($scope.lighter.concat([color]).concat($scope.darker));
    
    			// inject a duplicate last item for overlap hackery in tanuki mode: flower
    			if(!$scope.darkest) {
    				$scope.darkest = color;
    			}
    			$scope.shades.push($scope.darkest);
    
    			$scope.controlBg = _.first($scope.darker);
    			$scope.controlFg = _.last($scope.lighter);
    
    			$scope.deg = (360/($scope.shades.length-1));
    			$scope.size = Math.floor((100/($scope.shades.length-2) + Math.PI)/2);
    
    			$scope.color = color;
    			$scope.tuner = {
    				r: colors.red(color),
    				g: colors.green(color),
    				b: colors.blue(color),
    				hex: color,
    				brightness: cb
    			};
    
    			$scope.rotateFactor = _.findIndex($scope.shades, function(item){
    				return item === $scope.color;
    			});
    
    			$scope.ringDeg = $scope.deg*($scope.rotateFactor+1);
    
    			window.location.hash = color; //.replace('#', '#/');
    
    			 if (_notInRunLoop()) {
    				try {
    					// Sometimes we're outside of the Angular run-loop,
    					// and therefore need to manually invoke the `apply` method
    					$scope.$apply();
    				} catch(e) {}
    			}
    		};
    		
    		$scope.doIt = function(color){
    			doIt(color);
    		};
    		
    		$scope.setRingRotation = function(){
    			return {
    				transform: 'rotate(-'+$scope.ringDeg+'deg) translateZ(0)'
    			};
    		};
    
    		$scope.setRotation = function(index){
    			var i = index+1;
    			var d = $scope.deg*(i);
    			var m = '0 -'+$scope.size+'em';
    			var z = $scope.shades.length - i;
    			var t = (i * 0.08);
    			var r = 	'';
    			var s = '';
    			var f = '';
    			var n;
    
    			// hackery
    			if(i === $scope.shades.length) {
    				d = 360; //$scope.deg;
    				m = '0 -'+$scope.size+'em 0 0';
    				z = $scope.shades.length;
    			}
    
    			r = 'rotate('+d+'deg)';
    
    			return {
    				transform: r + s,
    				fontSize: f,
    				margin: m,
    				transitionDelay: t+'s',
    				zIndex: z
    			};
    		};
    
    		$scope.setClasses = function(color, test, affectText){
    			if(color) {
    				var classes = [];
    				if(affectText) {
    					var text = colors.brightness(color) < 155 ? 'fg-light' : 'fg-dark';
    					classes.push(text);
    				}
    
    				if(color === test) {
    						classes.push('current');
    				}
    
    				return classes.join(' ');
    			}
    		};
    
    		$scope.loadColor = function(color){
    				.........完整代码请登录后点击上方下载按钮下载查看