svg動態氣泡滑塊特效



68 270 91



特效描述:svg動態氣泡 滑塊特效,svg氣泡滑塊拖到效果

代碼結構

1. HTML代碼

<svg viewBox="0 0 200 200">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
      <feColorMatrix in="blur" mode="matrix" 
                     values="1 0 0  0   0  
                             0 1 0  0   0  
                             0 0 1  0   0  
                             0 0 0 18  -7" result="goo"/>
      <feBlend in="SourceGraphic" in2="goo"/>
    </filter>
  </defs>
  <g id="_slider" transform = "translate(100,100)"  >
    <rect x="-50" y="-1" width="100" height="2"  />
    <g id="_thumb" filter="url(#goo)"> </g>
  </g>
</svg>
<script>
const SVG_NS = "http://www.w3.org/2000/svg";
const XLink_NS = "http://www.w3.org/1999/xlink";
const svg = document.querySelector("svg");
let draggable = false;
let rid = null;
let m = { x: 0, y: 0 };
const t = { x: 100, y: 100 }; // translate
let dx = 0; // distance between the center of the balloon and the click point
const spring = 0.09;
const friction = 0.80;
class Slider {
  constructor() {
	this.target = {
		x:0,
		y:0,
		r:5,
		fontSize:5
	};
	this.pos = {
		x:0,
		y:0,
		r:5,
		fontSize:5
	};
	this.vel = {
		x:0,
		y:0,
		r:0,
		fontSize:0
	};
    /*this.track = {
      props: { x: -50, y: -1, width: 100, height: 2 },
      tagName: "rect"
    };*/
    this.thumb = {
      props: { cx: 0, cy: 0, r: 2,style:"pointer-events: none;" },
      tagName: "circle"
    };
    this.balloon = {
      props: { cx: 0, cy: 0, r: 5 },
      tagName: "circle"
    };
    this.label = {
      props: { x: 0, y: 0,style:"font-size:5px" },
      tagName: "text",
      text_content: "50"
    };
    //this.track.elmt = drawElement(this.track, _slider);
    this.thumb.elmt = drawElement(this.thumb, _thumb);
    this.balloon.elmt = drawElement(this.balloon, _thumb);
    this.label.elmt = drawElement(this.label, _thumb);
  }
  getThisTargetY(){
	  if(draggable){
		this.target.y = -11;
		this.target.r = 9;
		this.target.fontSize = 8;
		  }else{
		this.target.y = 0;
		this.target.r = 5;
		this.target.fontSize = 5;};
  }
  getThisTargetX(m){
  this.target.x = m.x - dx; 
  if (this.target.x < -50) {
    this.target.x = -50 ;
  }
  if (this.target.x > 50) {
    this.target.x = 50;
  }
  }
  getNewPos(prop){//x,y,r,fontSize	
    let dist = this.target[prop] - this.pos[prop];
    let acc = dist * spring;
    this.vel[prop] += acc;
    this.vel[prop] *= friction;
    this.pos[prop] += this.vel[prop];
  }
  update(){
	this.getNewPos("y"); 
	this.getNewPos("x"); 
	this.getNewPos("r");  
  this.thumb.props.cx = this.target.x;
  this.balloon.props.cx = this.pos.x;
  this.label.props.x = this.pos.x;
	this.label.elmt.textContent = Math.round(this.target.x) + 50;
	this.label.props.y = this.balloon.props.cy = this.pos.y;
	this.label.props.style = "font-size:"+this.target.fontSize+"px" 
	this.balloon.props.r = this.pos.r;
	updateElement(this.label); 
	updateElement(this.thumb);
	updateElement(this.balloon);  
  }
}
let slider = new Slider();
function drawElement(o, parent) {	
  let elmt = document.createElementNS(SVG_NS, o.tagName);
  for (let name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o.props[name]);
    }
  }
  if (o.text_content) {
    elmt.textContent = o.text_content;
  }
  parent.appendChild(elmt);
  return elmt;
}
function updateElement(o) {
  for (let name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      o.elmt.setAttributeNS(null, name, o.props[name]);
    }
  }
}
function oMousePosSVG(e) {
  let p = svg.createSVGPoint();
  p.x = e.clientX;
  p.y = e.clientY;
  let ctm = svg.getScreenCTM().inverse();
  p = p.matrixTransform(ctm);
  return p;
}
function transformedMousePos(e, t) {
  let m = oMousePosSVG(e);
  return {
    x: m.x - t.x,
    y: m.y - t.y
  };
}
function Animation() {
  requestId = window.requestAnimationFrame(Animation);
  slider.update();  
}
Animation();
slider.balloon.elmt.addEventListener("mousedown",
  function(e) {
	e.preventDefault();
	draggable = true;
    svg.style.cursor = "move";
    m = transformedMousePos(e, t);// mouse position
	  // distance between the center of the balloon and the click point
    dx = m.x - this.getAttributeNS(null, "cx");
    slider.getThisTargetY();
  },
  false
);
svg.addEventListener("mouseup",
  function(e) {
    draggable = false;
    svg.style.cursor = "default";
    slider.getThisTargetY();
  },
  false
);
svg.addEventListener("mousemove", function(e) {
  if (draggable) {
	m = transformedMousePos(e, t);
    slider.getThisTargetX(m)
  } else {
    svg.style.cursor = "default";
  }
});</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 圖片拖動 圖片拖拽 滑動選項卡 滑動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子