【自己给自己题目做】之一:椭圆可点击区域
【题一】
请实现以下需求,要做一个活动页面,页面上有一张图片(假设是800x600),图片正中心有一个椭圆形的可点击区域,假设椭圆长轴为200px(横向),短轴160px(纵向),请实现点击这个椭圆区域弹出“我被点击了”的字样,而其他区域点击无效。(不一定要兼容低端浏览器,能兼容当然更好)
我说这是我曾经出过的一道笔试题。其实主要考察点是基本的数学能力和用web前端相关知识实现需求的综合能力。难度不算太大。用普通的dom或者canvas来实现都ok,因为其实重要思路是一致的。椭圆区域还是要自己判断。
先看demo后讲思路:
demo: http://hongru.github.io/quiz/1/index.html
考点主要是以下几个:
1. 常用dom操作和简单事件机制(用类库比如jq也算)
2. 简单数学知识(椭圆公式,坐标是否在椭圆区域的判断)
3. 数学模型到编程实践的简单转换
代码不复杂:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{font-family:Microsoft Yahei; } .doc {width: 804px;margin: 0 auto; } #cont {border: 2px solid #999;height: 600px;position: relative; } .dot {position: absolute;width:1px;height: 1px;overflow: hidden;font-size:0;line-height: 0;background: #333; } </style> </head><body><div class="doc"><h4>【题一】</h4><p> 请实现以下需求,要做一个活动页面,页面上有一张图片(假设是800x600),图片正中心有一个椭圆形的可点击区域,假设椭圆长轴为200px(横向),短轴160px(纵向),请实现点击这个椭圆区域弹出“我被点击了”的字样,而其他区域点击无效。(不一定要兼容低端浏览器,能兼容当然更好)</p><div id="cont"></div></div><script>;(function () {var win = window,doc = document,OFFSET;function _bind (el, ev, fn) {return el.addEventListener ? el.addEventListener(ev, fn, false) : el.attachEvent('on'+ev, function () { fn.call(el); });}function _$ (id) {return doc.getElementById(id) || id;} function _drawElipse (id, a, b) {var el = _$(id);var docfrag = doc.createDocumentFragment();for (var i = 0; i < 360; i ++) {var dot = doc.createElement('div');dot.className = 'dot';var l = a*Math.sin(i) + (el.offsetWidth - 4)/2, t = b*Math.cos(i) + (el.offsetHeight - 4)/2; dot.style.left = l + 'px';dot.style.top = t + 'px';docfrag.appendChild(dot);}el.appendChild(docfrag);}function offset (el) {var width = el.offsetWidth,height = el.offsetHeight,top = el.offsetTop,left = el.offsetLeft;while (el = el.offsetParent) {top = top + el.offsetTop;left = left + el.offsetLeft;}return {top: top,left: left,height: height,width: width}}function clickCheck (e) {e = e || win.event;var tar = e.target || e.srcElement,x = e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft - OFFSET.left - (tar.offsetWidth/2), y = e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop - OFFSET.top - (tar.offsetHeight/2);var r = Math.pow((x/100), 2) + Math.pow((y/80), 2);console && console.log(x, y, r);if (r < 1) {alert('椭圆被点击了!');}}function __init() {_drawElipse('cont', 100, 80);var el = _$('cont');OFFSET = offset(el);_bind(el, 'click', clickCheck);}__init();})();</script> </body> </html>
View Code
其实重要的代码就是以下一段:
1 function clickCheck (e) { 2 e = e || win.event; 3 var tar = e.target || e.srcElement, 4 x = e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft - OFFSET.left - (tar.offsetWidth/2), 5 y = e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop - OFFSET.top - (tar.offsetHeight/2); 6 7 var r = Math.pow((x/100), 2) + Math.pow((y/80), 2); 8 console && console.log(x, y, r); 9 if (r < 1) { 10 alert('椭圆被点击了!'); 11 } 12 }
因为椭圆是画在中心的,上面的4,5行,获取x,y其实就是获取当前鼠标位置相对于容器中心的相对距离。(要算上scroll的距离和容器本身距离页面边缘的位置)
然后用椭圆公式,如果这个值小于1,那么表示在椭圆内点击的。
结束。
-------------------------------------
下期:定宽容器内若干大小不定图片自动排列的问题,允许一定程度内的缩放和裁剪,类似于下面的结果:
转载于:https://www.cnblogs.com/hongru/p/3187934.html
【自己给自己题目做】之一:椭圆可点击区域相关推荐
- 你还在担心期末复习没有题目做?爬虫帮帮你
你还在为期末复习没有题目做? 前言 题库刷题 暴力输出 结果展示 前言 Python数据分析与可视化期末复习,因为是学校第一年考试,只能去互联网上找题啦! 给大家推荐一个宝藏级的考试系统,里面有各种计 ...
- 时间计算题100道_时间不够用?题目做不完?做题攻略和时间分配来啦
来源微信公众号硬核考研 每天免费分享考研资料 各位同学们,大家晚上好呀! 10月还剩下了一个小尾巴,不知道大家在做真题时的时间怎样分配,很多考研儿们都会有时间不够用,题目做不完的烦恼.今天小编就来给大 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯...
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 用ECS做HexMap:鼠标点击六边形单元涂色
基于Unity2019最新ECS架构开发MMO游戏笔记21 准备工作 鼠标触碰六边形单元 鼠标点击位置 更新计划 作者的话 ECS系列目录 ECS官方示例1:ForEach ECS官方案例2:IJob ...
- 计算机职称考试题目做完会有提示么,取得计算机职称的考试心得
由于职称计算机考试是人事部统一题库,而且位模拟界面,所以有些时候,解法比较单一,如果你不知道通过考试要求的途径解决的话,就只有放弃,因此可以先适应下考试界面.专业软件的模块则比较少,我们工程类为例,a ...
- 【自己给自己题目做】:如何在Canvas上实现魔方效果
最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...
- 计算机的试题步骤,计算机二级题目 做计算机二级试题,按照答案步骤,为什么word 爱问知识人...
步骤1:选中标题,单击[开始]选项卡下[段落]组中的"居中"按钮.再选中"大学生网络创 业交流会",单击[开始]选项卡下[字体]组中的"字体" ...
- php生成图片表格自动换行_实用的财务做账表格,点击即可一键生成报表,并自动结转...
自从做了会计,不是在加班就是在加班的路上,加班大部分的时间就是在做excel表格,太累人了! 今天,小编特意分享这财务人员最需要的财务记账表格,基础数据录入之后,点击即可一键生成财务报表,并自动结转, ...
- 对于半圆形的点击区域该怎么做_十堰混合型塑胶跑道怎么选,橡胶跑道卷材型号...
河北迈弘体育设施有限公司为您详细解读hVgkXc十堰混合型塑胶跑道怎么选的相关知识与详情,校园跑道.体育馆田径跑道等都是体育活动的首先场合.由于终年正在室外遭到风吹日晒,还要接受日常体育活动的摩擦.描 ...
最新文章
- 近期活动盘点:数据化思维困局和0.01突破讲座、极简大数据决策,培养数据化思维讲座...
- a站手机访问电脑版_公司电脑一键变网盘,支持手机、家里电脑远程访问
- opencv精要(3)-win下codelite的opencv配置
- java超时自动关闭_[Java教程]web页面超时自动退出方法_星空网
- 【Java】存储单元的设计与模拟
- redis 条件查询
- Rufus v3.6 最好用的创建USB启动盘,速度嗖嗖的
- 「镁客·请讲」艾拉比芮亚楠:当OTA普及,我们将在物联网和车联网看到三个变化...
- 解决ubuntu20.04火狐浏览器不能播放视频
- Typora数学公式和符号整理
- 2025年,我的人生全被互联网巨头垄断了
- 笔试中怎么答产品设计类题目
- 财报数据知冷暖:欧洲电信市场整体复苏中
- C++中使用代码修改字体颜色
- 玄武密码(bzoj4327)(JSOI2012)
- 扫描二维码 生成二维码
- GNU Radio 实数与复数信号分析
- 只能上qq不能上网的问题,跟adsafe有关
- mysql数据库的多表查询(一对一,一对多,多对多)
- PC端——如何屏蔽掉某网站-极度简洁-继hosts后的全新改良版~!