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