Raphael的鼠标over move out事件
2015-12-17 11:17
330 查看
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...' }) }); }
相关文章推荐
- canvas arc()方法详解
- 市 区 分级显示marker
- error1062 ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry ’1′ for
- MyEclipse 怎样手动编译整个项目
- LeetCode OJ : 6 ZigZag Conversion
- Universal-Image-Loader 原理和实现
- UISlider的使用
- poolingHttpclientConnectionmanager 使用
- DELL服务器iDRAC相关设置
- 端口(地址)扫描工具nmap的使用
- Linux PM: Hibernate/Sleep
- Spring jdbctemplate学习笔记
- program design recipe
- 知名程序员书架
- 完全解决快速连续多次点击button导致跳转多个界面(注:方法从他人博客中看到,稍作修改)
- 黑马公社(微信公众号:heimagongshe)
- iOS开发笔记之三十二——UITableView的UITableViewStyleGrouped风格顶部空白的设置
- 数据库中清空log日志
- spring运用DBCP连接数据源
- Windows下mysql忘记root密码的解决方法