营销网站制作流程,英文网站建设比较好,做网站交互demo工具,淄博网站建设公司三农【题一】请实现以下需求#xff0c;要做一个活动页面#xff0c;页面上有一张图片#xff08;假设是800x600#xff09;#xff0c;图片正中心有一个椭圆形的可点击区域#xff0c;假设椭圆长轴为200px#xff08;横向#xff09;#xff0c;短轴160px#xff08;纵向…【题一】请实现以下需求要做一个活动页面页面上有一张图片假设是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 charsetutf-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
/headbodydiv classdoch4【题一】/h4p
请实现以下需求要做一个活动页面页面上有一张图片假设是800x600图片正中心有一个椭圆形的可点击区域假设椭圆长轴为200px横向短轴160px纵向请实现点击这个椭圆区域弹出“我被点击了”的字样而其他区域点击无效。不一定要兼容低端浏览器能兼容当然更好/pdiv idcont/div/divscript;(function () {var win window,doc document,OFFSET;function _bind (el, ev, fn) {return el.addEventListener ? el.addEventListener(ev, fn, false) : el.attachEvent(onev, 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 } 因为椭圆是画在中心的上面的45行获取x,y其实就是获取当前鼠标位置相对于容器中心的相对距离。要算上scroll的距离和容器本身距离页面边缘的位置 然后用椭圆公式,如果这个值小于1那么表示在椭圆内点击的。 结束。 ------------------------------------- 下期定宽容器内若干大小不定图片自动排列的问题允许一定程度内的缩放和裁剪类似于下面的结果 转载于:https://www.cnblogs.com/hongru/p/3187934.html
