源码例子下载 :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>画椭圆</title>
<style>
.title{text-align:center;}
.wrapper{margin: 0 auto;width: 500px; margin: 0 auto;border: 1px solid #000000;}
.content{position: relative;height: 500px;}
.dot{position: absolute;width:1px;height: 1px;overflow: hidden;font-size:0;line-height: 0; background: #333;}
</style>
</head>
<body>
<h1 class="title">画一个椭圆并判断点击是否在椭圆内</h1>
<div class="wrapper">
<div class="content" id="content">
</div> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
//*********定义加载模块方法 start **************//
(function (window, undefined) {
if (window.define) {
return
}
function isFunction(obj) {
return Object.prototype.toString.call(obj) === "[object Function]"
} var MM = {};
var initModuleName = "initRun"; function require(name) {
if (!MM[name]) {
throw new Error("Module " + name + " is not defined.")
}
var module = MM[name];
if (module.inited === false) {
runModule(name)
}
return module.ret
} function runModule(name) {
var exports = {};
var module = MM[name];
if (isFunction(MM[name].factory)) {
var ret = MM[name].factory.apply(undefined, [require, exports, undefined]);
module.ret = ret === undefined ? exports : ret
} else {
module.ret = MM[name].factory
}
module.inited = true
} function define(name, deps, factory) {
if (MM[name]) {
throw new Error("Module " + name + " has been defined already.")
}
if (isFunction(deps)) {
factory = deps
}
MM[name] = {factory:factory, inited:false};
if (name === initModuleName) {
runModule(name)
}
} window.define = define
})(window);
//*********定义加载模块方法 end **************// /**
* @author ruby
* @despretion 画椭圆并判断点击是否在椭圆内
* @return
*/
(function(){
/**
* @dec 可以进行缓存的节点
* @type {Object}
*/
var $dom = {
content : $('#content')
}
/**
* @despretion定义 画椭圆函数
*/
define('mode/drawEliplse',function(require){
var ElipObj ={
draw : function(el,a,b){
var dotHtmlArr = [],//储存 画点的 html元素
leftStyle , rightStyle; //左右的样式值
var widthEl = el && el[0].offsetWidth ,
heightEl = el && el[0].offsetHeight;  for(var i = 0; i < 360;i++){
leftStyle = (a*Math.sin(i) + (widthEl-2)/2) + "px";
rightStyle = (b*Math.cos(i) + (heightEl-2)/2) + "px"; dotHtmlArr.push('<div class="dot" style="left:' +
leftStyle+';top:'+rightStyle+'"></div>');
} el.html(dotHtmlArr.join("")); }
,
/**
* @desc 判断点击是否在椭圆内 算法在椭圆内点 左边点带入 后值小于1
* @param a 椭圆长
* @param b 椭圆宽
* @param x 鼠标x坐标
* @param y 鼠标y坐标
* @parm true 在椭圆内 false 不在椭圆内
*/
prove : function(a,b,x,y){
return Math.pow((x/a),2) + Math.pow((y/b),2) < 1 ? true : false;
}
}
return ElipObj;
});
/**
* @desc需要进行绑定的事件
*/
define('view/bindFun',function(require){
var drawMode = require("mode/drawEliplse"); $dom.content.bind('click',function(e){
if (e.pageX || e.pageY) {
var x = e.pageX,
y = e.pageY;
} else {
var x = e.clientX + document.body.scrollLeft - document.body.clientLeft,
y = e.clientY + document.body.scrollTop - document.body.clientTop;
} var offsetX = $(this).offset().left,
offsetY = $(this).offset().top; //鼠标所在点位置相对与中心点
x = x - offsetX - ($(this)[0].offsetWidth -2)/2;
y = y - offsetY - ($(this)[0].offsetHeight -2)/2; if( drawMode.prove(100,80,x,y) ){
alert("点击在椭圆内");
} }); });
/**
* @desc 模块启动函数
*/
define('initRun',function(require){
var drawMode = require("mode/drawEliplse"); drawMode.draw($dom.content,100,80);
require("view/bindFun"); }) })()
</script>
</body>
</html>

利用jquery判断点是否在椭圆内的更多相关文章

  1. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  2. 利用JQuery 来操作 ListBox和ListBox内移动

    [导读]利用jquery 来操作 listbox和listbox内移动function listbox_move(listfrom,listto) { var size = $(" &quo ...

  3. js jquery 判断元素是否在数组内(转)

    一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...

  4. jQuery判断当前页面是APP内打开还是浏览器打开

    一.代码如下: function check_useragent() { var browser = { versions: function() { var u = navigator.userAg ...

  5. 利用jquery的$.Deferred方法在一个函数内获取另一个函数的返回值

    使用场景:方法B需要方法A执行完成之后再执行,比如方法B中有用到方法A的变量:(需要引入jQuery1.5以后的版本) function A(){ var deffered = new $.Defer ...

  6. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  9. js/jquery判断浏览器的方法小结

    在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把 ...

随机推荐

  1. python3环境的搭建

    Python3 下载 Python3 最新源码,二进制文档,新闻资讯等可以在 Python 的官网查看到: Python 官网:https://www.python.org/ 你可以在以下链接中下载 ...

  2. SQL语句优化 (二) (53)

    接上一部分 (4)如果不是索引列的第一部分,如下例子:可见虽然在money上面建有复合索引,但是由于money不是索引的第一列,那么在查询中这个索引也不会被MySQL采用. mysql> exp ...

  3. JSONP前世今生及原理

    https://blog.csdn.net/hansexploration/article/details/80314948 http://www.cnblogs.com/yuzhongwusan/a ...

  4. 【OCP新题库】052最新题库解析-第5题

    5.Which two affect the time taken for instance recovery? A) size of redo logs B) size of UNDO tables ...

  5. 关于Collections的操作方法

    Collections是一个包装类,其中包含有各种有关集合操作的静态多态方,比如可以作用在List和Set上,此类不能实例化. 排序 Integer[] array = new Integer[]{3 ...

  6. LOJ#6360. 复燃「恋之埋火」(最小圆覆盖+高斯消元)

    题面 传送门 题解 不难发现最小圆覆盖的随机增量法复杂度还是正确的 所以现在唯一的问题就是给定若干个点如何求一个\(m\)维的圆 其实就是这一题 //minamoto #include<bits ...

  7. BZOJ 1934--善意的投票(最小割)

    1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 2354  Solved: 1471[Submit][ ...

  8. lamp-linux3

    LAMP编程之Linux(3) 一.权限管理 1.权限介绍(重点) 在Linux中分别有读.写.执行权限: 读权限: 对于文件夹来说,读权限影响用户是否能够列出目录结构 对于文件来说,读权限影响用户是 ...

  9. CentOS6.5下openssh服务

    00×0 介绍 OpenSSH是使用SSH通过计算机网络加密通讯的实现.它是取代由SSH Communications Security所提供的商用版本的开放源代码方案.目前OpenSSH是OpenB ...

  10. Android中LayoutParams的用法

    简单说说 自己对 android LayoutParams的理解吧,xh写不出高级文章是低级写手.public static classViewGroup.LayoutParamsextends Ob ...