Loading

Raphael的鼠标over move out事件

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...'
        })
    });
}

 

posted @ 2015-12-17 11:17  stono  阅读(354)  评论(0)  编辑  收藏  举报