Raphael的鼠标over move out事件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index010.js"></script>

</head>

<body>

<div id="container"></div>

</body>

</html>
$(function() {

    initRaphael();

});

function initRaphael(e) {

    var paper = Raphael(0, 0, 500, 500);

    // var s = paper.rect(25, 25, 250, 250).attr('fill', 'red');

    // s.click(function(e) {

    // this.attr('fill', 'blue');

    // });

    // 线段点击有些问题，容易点击不上；

    var p = paper.path('M10,10L200,200');

    p.click(function(e) {

        var sW = this.attr('stroke-width');

        if (sW == 1) {

            this.attr('stroke-width', 2);

        } else {

            this.attr('stroke-width', 1);

        }

    }).mouseover(function(e) {

        this.attr('stroke-width', 2);

    }).mouseout(function(e) {

        this.attr('stroke-width', 1);

    });

    var square = paper.rect(200, 10, 50, 70).attr('fill', 'steelblue');

    var circle = paper.circle(120, 140, 25).attr('fill', 'yellow');

    var ellipse = paper.ellipse(60, 150, 30, 15).attr('fill', 'orange');

    var stuff = paper.set();

    stuff.push(square, circle, ellipse);

    var label = paper.text(10, 10, 'Mouse over an object').attr('text-anchor', 'start');

//    stuff.mouseover(function(e) {

//        label.attr({

//            'text' : this.attr('fill'),

//            x : e.clientX,

//            y : e.clientY

//        });

//    }).mouseout(function(e) {

//        label.attr('text', 'Mouse over an object...');

//    });

    // stuff mouse事件改进

    stuff.mouseover(function (e) {

        label.attr('text',this.attr('fill'));

    }).mousemove(function (e) {

        label.attr({

            x:e.clientX+10,

            y:e.clientY

        });

    }).mouseout(function (e) {

        label.attr({

            x:10,

            y:10,

            text:'Mouse over an object...'

        })

    });

}

Raphael的鼠标over move out事件的更多相关文章

  1. 鼠标焦点变化引起mouseout事件

    做了个小手术,渐渐回归网络啦! 问题: 在自制的提示离鼠标太近时,会引起无法提示的功能. 自制提示离图片太近时,提示图片一直一闪一闪的,截图截不出来,就只放改善后的图片(不闪). 原因: 为什么呢?书 ...

  2. javascript鼠标双击时触发事件大全

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  3. jquery 鼠标经过延时触发事件，jquery插件

    jquery 鼠标经过延时触发事件. 用来做:鼠标经过选项卡,延时切换,鼠标经过商城分类延时显示,最好不过,防止用户随便滑动就切换了选项卡. 一.引入jq 二.加入以下插件代码 /* * 鼠标经过延时 ...

  4. Qt窗口添加鼠标移动拖拽事件

    1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...

  5. 关于chrome浏览器事件拖动的bug（首次点击的时候也触发move的事件）

    在做R80web的时候出现一个奇怪的现象,chorme现在的版本还是存在,拖动事件有mousedown.mousemove.mouseup组成,但是首次click以及失去焦点再重新点击的时候同样会触发 ...

  6. javascript中区分鼠标单击和拖动事件

    在javascript中,一般的DOM元素如div,都有onmousedown.onmousemove.onmouseup这3个鼠标事件. <div id="div1" on ...

  7. 鼠标 mouseover和mouseout事件

    在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...

  8. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  9. raphael入门到精通---属性和事件篇

    属性的使用 上一篇文章我们介绍了raphael如何生成基本的图形(元素),对于每个元素来讲,我们可以添加很多的元素(attr) 下面我就来简单的介绍下元素属性的使用(path元素属性我后面单独列出来介 ...

随机推荐

  1. CG之菲涅尔效果简单实现

    菲涅尔效果,指当光到达两种材质的接触面时,一些光在接触面的表面被反射出去,而另一部分光将发生折射穿过接触面. 现在要用shader来实现这种效果,如果要精确地描述这种底层的物理,其计算公式是非常复杂的 ...

  2. opencart配置

    1.安装opencart 2.修改后台目录(慎重,修改后插件安装会出错) Opencart默认的后台是网站/admin这样子,很多人可以猜到这种组合对于正式生产环境很不安全,我们可以把这个admin改 ...

  3. 使用Dreamweaver格式化HTML代码

    今天偶然发现了DreamWeaver(DW)的一个非常有用的功能,就是代码的格式化功能.一般情况下,我们写的html或者css代码都计较混乱,难以阅读,即使刚开始很在意代码的可读性,但是等到所使用的标 ...

  4. 基于Annotation与SpringAOP的缓存简单解决方案

    前言: 由于项目的原因,需要对项目中大量访问多修改少的数据进行缓存并管理,为达到开发过程中通过Annotation简单的配置既可以完成对缓存的设置与更新的需求,故而设计的该简易的解决方案. 涉及技术: ...

  5. decoder3_8

    这两天回归书本,继续阅读书上的内容,此时的体会与刚开始学那会的体会是不一样的,比如3_8decoder,之前就认为可以用case来写,而书上有一种更简便的方式来描述,带给你新的思路,既然有新方式可以描 ...

  6. webapp之路--百度手机前端经验（转）

    看了之后收获很大,分享一下: 本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从localstorage缓存和版本号管理,模块化,静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方 ...

  7. 关于iOS自定义控件：在view上实现事件和代理

    自定义控件.h #import <UIKit/UIKit.h> #import "PPViewtouchesBeginDelegate.h" @interface PP ...

  8. (中等) POJ 1084 Square Destroyer , DLX+可重复覆盖。

    Description The left figure below shows a complete 3*3 grid made with 2*(3*4) (=24) matchsticks. The ...

  9. python模块--ip地址转换为整数

    python整数与IP地址转换 [转] 我们有时会将一个整数与IP地址进行互换,用python代码实现很简单 将一个整数如2000000,变为一个IP地址的方式 >>> import ...

  10. kafka第三篇--安装使用

    说明:直接下载二进制包可省略安装过程,省略很多麻烦. 1单机 安装 安装过程,参考官网: > tar xzf kafka-<VERSION>.tgz > cd kafka-&l ...