源码例子下载 ：

<!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. NPOI 设置excel 边框

    https://blog.csdn.net/xxs77ch/article/details/50232343

  2. PHP设计日历类一 （38）

    由两个文件组成: 第一个test.php <style> table { border:1px solid #; } .fontb { color:white; background:bl ...

  3. A - 还是畅通工程（最小生成树）

    点击打开链接 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可),并 ...

  4. kinect 2 for xbox畸变矫正

    kinect 2 for xbox畸变矫正 畸变校正的详细方法在iai_kinect2/kinect2_calibration的readme文件中. 由于通过kinect2获得的图像数据有不同的模式( ...

  5. rpm 安装卸载

    安装命令 rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm 包并在安装过程中显示正在安装的文件信息: rp ...

  6. Laravel 完整开源项目大全

    来自 Laravel学院:http://laravelacademy.org/ http://laravelacademy.org/laravel-project 原型项目 Laravel 5 Boi ...

  7. spring-boot-maven-plugin多模块install问题解决办法

    一.问题描述: 项目分多个模块,open-eureka注册中心.open-provider服务提供者.open-common公共部分,provider依赖common.父pom使用spring-boo ...

  8. php 内存分配新

    https://yq.aliyun.com/articles/38307 https://yq.aliyun.com/ziliao/132720 http://blog.liyiwei.cn/%E3% ...

  9. 火狐浏览器下，td 直接使用position:relative;和background:;产生的边框消失问题

    消失示例: td{ width:40px; height:28px; position:relative; background:#ccc; } 出现问题 问题原因: 我的理解是各个浏览器之间对于ba ...

  10. Xcode升级到9.3之后pod问题

    最近新建了一个项目,然后在终端pod init的时候出现了问题,复制粘贴部分错误信息 MacBook-Pro:testDemo xywy$ pod init [in /Users/xywy/Deskt ...