源码例子下载 ：

<!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. docker 存储驱动之 overlay2

    overlay2 简介 OverlayFS是一种和AUFS很类似的文件系统,与AUFS相比,OverlayFS有以下特性:  1) 更简单地设计 2) 从3.18开始,就进入了Linux内核主线 3) ...

  2. Python(简单计算器)

    参考:https://www.cnblogs.com/alex3714/articles/5169958.html import re ret = re.search('\([^()]+\)','(1 ...

  3. 使用memcache或redis限制某个用户或者某ip用户一段时间内最大投票次数

    实现每个用户在某网站10分钟内最多投票5次 function isFrequently($key){ $t = 60*10; $n = 5; $mem = new Memcache(); $mem-& ...

  4. ckeditor4.5.11+ckfinder_java2.6.2配置

    http://blog.csdn.net/skyman1942/article/details/52537100 1.环境说明: 日期:2016-09-14 工具:ckeditor_4.5.11+ck ...

  5. Security-OAuth2.0 密码模式之客户端实现

    我的OAuth2.0 客户端项目目录 pom 的配置 <?xml version="1.0" encoding="UTF-8"?> <proj ...

  6. Java多线程——线程封闭

    线程封闭:当访问共享的可变数据时,通常需要同步.一种避免同步的方式就是不共享数据.如果仅在单线程内访问数据,就不需要同步,这种技术称为线程封闭(thread  confinement) 线程封闭技术一 ...

  7. python里有意思的文件查找glob模块

    python标准库之glob介绍 glob 文件名模式匹配,不用遍历整个目录判断每个文件是不是符合. 1.通配符 星号(*)匹配零个或多个字符 import glob for name in glob ...

  8. 前端知识总结--BFC

    Block Formatting Context,中文直译为块级格式上下文. 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  9. springmvc 运行原理 Spring ioc的实现原理 Mybatis工作流程 spring AOP实现原理

    SpringMVC的工作原理图: SpringMVC流程 . 用户发送请求至前端控制器DispatcherServlet. . DispatcherServlet收到请求调用HandlerMappin ...

  10. CentOS 7 安装过程中设置网络

    如果在安装过程中需要使用网络,需要启动网卡,默认是DHCP 点击configure进入设置 General 常规设置 Automatically connect to this network whe ...