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...'
})
});
}
Raphael的鼠标over move out事件的更多相关文章
- 鼠标焦点变化引起mouseout事件
做了个小手术,渐渐回归网络啦! 问题: 在自制的提示离鼠标太近时,会引起无法提示的功能. 自制提示离图片太近时,提示图片一直一闪一闪的,截图截不出来,就只放改善后的图片(不闪). 原因: 为什么呢?书 ...
- javascript鼠标双击时触发事件大全
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- jquery 鼠标经过延时触发事件,jquery插件
jquery 鼠标经过延时触发事件. 用来做:鼠标经过选项卡,延时切换,鼠标经过商城分类延时显示,最好不过,防止用户随便滑动就切换了选项卡. 一.引入jq 二.加入以下插件代码 /* * 鼠标经过延时 ...
- Qt窗口添加鼠标移动拖拽事件
1. .h文件中添加 private: QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...
- 关于chrome浏览器事件拖动的bug(首次点击的时候也触发move的事件)
在做R80web的时候出现一个奇怪的现象,chorme现在的版本还是存在,拖动事件有mousedown.mousemove.mouseup组成,但是首次click以及失去焦点再重新点击的时候同样会触发 ...
- javascript中区分鼠标单击和拖动事件
在javascript中,一般的DOM元素如div,都有onmousedown.onmousemove.onmouseup这3个鼠标事件. <div id="div1" on ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- JS鼠标移入,移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...
- raphael入门到精通---属性和事件篇
属性的使用 上一篇文章我们介绍了raphael如何生成基本的图形(元素),对于每个元素来讲,我们可以添加很多的元素(attr) 下面我就来简单的介绍下元素属性的使用(path元素属性我后面单独列出来介 ...
随机推荐
- BNU OJ 50997 BQG's Programming Contest
#include<cstdio> #include<cstring> #include<cmath> #include<algorithm> using ...
- Java中Date对象与String互转
package com.java.test; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...
- iOS JsonModel
iOS JsonModel 的使用 本文转自:http://blog.csdn.net/smking/article/details/40432287 下面讲一下JSONModel的使用方法. @in ...
- 蘑菇街teamtalk简介
这几天在看蘑菇街实时通讯程序teamtalk的安卓端代码.现在对程序的大概情况进行简单的介绍. 蘑菇街的teamtalk开源项目包含了服务器端,Android客户端和iPhone客户端的程序.想要进行 ...
- Arduino单片机使用和开发问题记录(转)
源:Arduino单片机使用和开发问题记录 1.将程序上传到板子时Arduino IDE提示“avrdude: stk500_getsync(): not in sync: resp=0x00” 网上 ...
- android测试之——mokeyrunner上(二)
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...
- Quartz.NET总结(一)
Quartz.NET总结(一) 前段时间,花了大量的时间,将原先的计划任务,切换到Quartz.NET来进行管理.原先的后台定时服务都是通过计划任务来实现的,但是随着业务增长,计划任务也越来越多,每个 ...
- Vue.js起步
Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层.Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. V ...
- 分布式事务 & 两阶段提交 & 三阶段提交
可以参考这篇文章: http://blog.csdn.net/whycold/article/details/47702133 两阶段提交保证了分布式事务的原子性,这些子事务要么都做,要么都不做. 而 ...
- p4factory 解决“g++: internal compiler error: Killed (program cc1plus)” make error问题
参考:解决: g++: internal compiler error: Killed (program cc1plus) 在安装p4factory的时候,执行: ./install_deps.sh ...