源码例子下载 ：

<!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 ...