源码例子下载 ：

<!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. 异步和等待(async和await)

    在.Net 4.5中,通过async和await两个关键字,引入了一种新的基于任务的异步编程模型(TAP).在这种方式下,可以通过类似同步方式编写异步代码,极大简化了异步编程模型.如下式一个简单的实例 ...

  2. 记录---IIS显示asp.net程序的具体错误

    原来IIS设置成显示单一的错误页面 但是最近的服务器页面报错,但是本地确实完好的:所以想着让服务器显示具体的报错 网上找到两种方法: 先说第一种有效的: 通过 web.config 配置 其实,上面在 ...

  3. list<T>集合中的Remove()、RemoveAt()、RemoveRange()、RemoveAll()的用法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Android ScrollView 去掉 scrollbar 和 阴影

    1. 在 layout 里: android:scrollbars="none" android:overScrollMode="never" 2. 代码里 / ...

  5. jQuery--基本介绍与下载

    本篇内容: 1.jquery学习内容 2.jquery下载,引用 3.使用顺序 4.版本 5.jquery对象与DOM对象转化 jQuery认识: jQuery学习内容 选择器 筛选器 样式操作 文本 ...

  6. tcp udp socket编程

    http://blog.csdn.net/ns_code/article/details/14128987

  7. java学习笔记DOM4J解析（7）

    DOM4J即Document Object Model for Java使用java技术以文档方式解析XML数据的模型. DOM4J是开源组织提供的一个免费的.强大的XML解析工具,如果开发者需要在项 ...

  8. 【Oracle 12c】CUUG OCP认证071考试原题解析（35）

    35.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. Evalu ...

  9. “全栈2019”Java第一百一十二章：什么是闭包？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. POJ1095 Trees Made to Order(JAVA)

    这题用到了卡特兰数,比较麻烦.关于卡特兰数的基本概念百度一下你就知道. 使用卡特兰数对数组元素进行分组之后,需要具体计算一下要求的是第几组的第几个数,然后向下递归. 首先来看利用卡特兰数分组: 从1开 ...