zoukankan      html  css  js  c++  java
  • raphael.js 给元素 hover 添加glow() 外发光

     用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx ,  xxx , 还有xxx

    $(document).ready(function() {
        var paper = Raphael(0,0,360,360);
        var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
        myCircle.hover(function() {
            myCircle.glow().attr('stroke','#FFF');
        }, function() {
            // removing the glow from the circle??
        });
    });
    

      

    raphael.js 官网的文档是在是羞涩难懂,它的文档里面对glow()的用法如下:

     Element.glow([glow])⚓➭
    
    Return set of elements that create glow-like effect around given element. See Paper.set.
    
    Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.
    
    Parameters
    glowobject
    parameters object with all properties optional:
    {
    widthnumber //size of the glow, default is 10
    fillboolean //will it be filled, default is false
    opacitynumber //opacity, default is 0.5
    offsetxnumber //horizontal offset, default is 0
    offsetynumber //vertical offset, default is 0
    colorstring //glow colour, default is black
    }
    Returns:objectPaper.set of elements that represents glow
    

      

     嗯,我也依然还是不晓得要怎么在mouseout的时候如何把这个glow()的效果给remove掉。

     后偶然发现一个奇葩的解决方案。

    function init(){
    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);
    
    // Creates circle at x = 50, y = 40, with radius 10
    var circle = paper.circle(50, 40, 10);
    // Sets the fill attribute of the circle to red (#f00)
    circle.attr("fill", "#f00");
    
    // Sets the stroke attribute of the circle to white
    circle.attr("stroke", "#fff");
    
    circle.hover(
    // When the mouse comes over the object //
    // Stock the created "glow" object in myCircle.g
    function() {
    this.g = this.glow({color: "#FFF",  100});
    },
    // When the mouse goes away //
    // this.g was already created. Destroy it!
    function() {
    this.g.remove();
    });
    }
    

      

     -----------------------------------------节操分界线---------------------------------------------------------------

    
    
    mouseover --> this.g = this.glow({color: "#FFF",  100});
    
    mouseout  --> this.g.remove();
    
    
    妹的,太奇葩了有么有!看文档的人谁能想到是这么用的我陪睡啊。

    居然你会发下this.g 的这个g,居然是任意的,只要不是"glow" 把本来的glow给覆盖了就可以,你甚至可以
     
    mouseover --> this.xxoo = this.glow({color: "#FFF",  100});
    
    mouseout  --> this.xxoo.remove();
    

      



    这个,太没节操了!
     


  • 相关阅读:
    二十二、Linux 进程与信号---进程创建
    二十一、Linux 进程与信号---进程查看和进程状态、进程调度和进程状态变化、进程标识
    二十一、Linux 进程与信号---进程资源限制
    二十、Linux 进程与信号---非局部跳转
    AOSP android 源码下载
    十九、Linux 进程与信号---环境表
    十八、Linux 进程与信号---进程介绍
    09 scroll系列_简单的封装动画函数(变速(缓动)的动画函数_getComputedStyle函数_复杂的动画函数封装_颜色相关_案例_client系列
    A 第二课 栈_队列_堆
    pycharm 的快捷键
  • 原文地址:https://www.cnblogs.com/litao229/p/3165362.html
Copyright © 2011-2022 走看看