源码例子下载 ：

<!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. PostSharp 结合 log4net 自动记录日志

    环境: VS 2012 PostSharp-4.1.28  (下载地址)https://visualstudiogallery.msdn.microsoft.com/a058d5d3-e654-43f ...

  2. linq与数据库之添加

    这个是linq的添加显示 代码如下: //添加 private void button2_Click(object sender, EventArgs e) { string strstu = &qu ...

  3. [C#学习笔记]Func委托与Action委托

    学习一项新知识的时候,最好的方法就是去实践它. 前言 <CLR via C#>这本神书真的是太有意思了!好的我的前言就是这个. Fun 如果要用有输入参数,有返回值的委托,那么Func委托 ...

  4. leetcode 回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...

  5. windows server 2008 站点系列--AD的站点建立与子网的管理(zhuanzai)

    本次课程将给大家介绍AD中站点和子网的功能.站点和子网之间的关联,以及相关的设置步骤. 应用背景介绍: contoso公司的总部在西安(Xian),陕南的汉中(Shannan)和陕北的榆林(Shanb ...

  6. ceph luminous 新功能之内置 dashboard

    # 开启 dashboard (在任一 mon_server 节点上)ceph mgr module enable dashboard # 设置dashboard 端口和IPceph config-k ...

  7. sql server中的 trimtrailingblanks

    使用sp_help 查出 发现有个这个属性, 如何修改呢? SET ANSI_PADDING ONAlter Table Sys_users_History Alter   column PveSit ...

  8. PHP和JS中全局变量和局部变量

    一,PHP中全局变量和局部变量 php与C++中对全局变量和局部变量定义类似,全局变量:函数外定义的变量,在全局通用:局部变量:在函数内定义的变量,只在函数内有效.PHP中变量范围跨越了include ...

  9. java使用Redis8--3.0集群

    Redis集群至少需要3个主节点 # cd /usr/redis 创建一个目录 # mkdir cluster # cd cluster 1.复制一个配置文件 # cp ../redis.conf 9 ...

  10. ubuntu apt update时W: GPG error http://ppa.launchpad.net lucid Release没有公钥无法验证NO_PUBKEY签名问题解决

    在安装更新时,即在运行命令行sudo apt-get update 或者运行更新管理器的时候,出现W: GPG 错误: W: GPG error: http://ppa.launchpad.net/o ...