m.lom599.com_手机版乐白家网址_乐百家手机首页登录

js判断鼠标位置是否在某个div中的方法,js编写组

作者: 手机版乐白家网址  发布:2019-07-13

正文实例陈诉了jquery插件jquery.LightBox.js完成点击放大图片并左右点击切换效果。分享给我们供大家参考,具体如下:

本文实例陈说了js判定鼠标地点是或不是在有个别div中的方法。分享给我们供我们参照他事他说加以考察,具体如下:

率先介绍使用v8 API跟使用swig框架的比不上:

该插件乃小说小编所写,意在提高小编的js技术,也给部分js菜鸟在应用插件时提供一些实惠,老司机就没事地飞过吧。

div的onmouseout事件让div消失时,会出现这么的境况,就是当鼠标移至div中的其余内容时,此时也判断为距离div,会触发 onmouseout事件,那样div中的内容就不可能操作了。消除的方法是当触发onmouseout事件时,先决断鼠标是还是不是在div内,假设在,表达鼠 标并未距离div,就不删除div,不然,删除之。OK,未来主题素材一举成功了。
不畏找到该div左上角和右下角坐标,判定鼠标的坐标是不是在这一区域就足以了。

(1)v8 API方式为法定提供的原生方法,功能庞大而完美,瑕玷是亟需熟稔v8 API,编写起来比较麻烦,是js强相关的,不轻易支持任何脚本语言。

此插件目的在于完结方今相比流行的点击放大图片并左右点击切换图片的效率,您能够根据自个儿的实际须求来安装是不是丰盛左右切换图片的功力。全体代码如下:

div.onmouseout=function(event){
    var div = document.getElementById("test");
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = div.offsetLeft;
    var divy1 = div.offsetTop;
    var divx2 = div.offsetLeft   div.offsetWidth;
    var divy2 = div.offsetTop   div.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
    //如果离开,则执行。。
}

(2)swig为第三方帮忙,八个强硬的组件开采工具,扶助为python、lua、js等二种周围脚本语言生成C 组件包装代码,swig使用者只要求编写制定C 代码和swig配置文件就可以支付各个脚本语言的C 组件,没有须要精通各类脚本语言的组件开采框架,劣势是不扶助javascript的回调,文档和demo代码不到家,使用者相当少。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.item{margin:20px;}
.item ul li{float:left;margin-right:20px;}
.item ul li img{width:100px;cursor:pointer;}
.lb_wrap{display:none;}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}
.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}
.lightbox p.next{left:auto;background-position:right top;right:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.LightBox.js"></script>
</head>
<body>
<div class="item">
 <ul>
  <li><img src="01.jpg" /></li>
  <li><img src="02.jpg" /></li>
  <li><img src="03.jpg" /></li>
  <li><img src="04.jpg" /></li>
  <li><img src="05.jpg" /></li>
  <li><img src="06.jpg" /></li>
 </ul>
</div>
<script>
$(function(){
  $(".item").LightBox({
    controls : true //上一张、下一张按钮是否显示,默认是显示true
    });
  })
</script>
</body>
</html>

末尾为局地常用属性方便寻觅

一、纯JS实现Node.js组件 (1)到helloworld目录下实行npm init 发轫化package.json,种种选项先不管,暗中同意就可以。

插件jquery.LightBox.js代码:

clientHeight     获取对象的可观,不总括任何边距、边框、滚动条,但包蕴该对象的补白。
clientLeft     获取    offsetLeft     属性和客户区域的实际左侧之间的相距。
clientTop     获取    offsetTop     属性和客户区域的莫过于最上端之间的相距。
clientWidth     获取对象的肥瘦,不总结任何边距、边框、滚动条,但满含该对象的补白。
offsetHeight     获取对象相对于版面或由父坐标    offsetParent     属性钦定的父坐标的惊人。
offsetLeft     获取对象相对于版面或由    offsetParent     属性钦赐的父坐标的一个钱打二十六个结右侧地点。
offsetParent     获取定义对象    offsetTop     和    offsetLeft     属性的器皿对象的援引。
offsetTop     获取对象绝对于版面或由    offsetTop     属性钦命的父坐标的估测计算最上部地点。
offsetWidth     获取对象相对于版面或由父坐标    offsetParent     属性内定的父坐标的增长幅度。
offsetX     设置或获得鼠标指针地点相对于触发事件的靶子的    x     坐标。
offsetY     设置或得到鼠标指针地方相对于触发事件的对象的    y     坐标。
clientX,clientY   鼠标当前相对于网页的地点,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示屏的职位

(2)组件的贯彻index.js,举例:

/*
*LightBox 1.0
*dependence jquery-1.7.1.js
*/
;(function(a){
  a.fn.LightBox = function(options){
    var defaults = {
      controls : true //上一张、下一张按钮是否显示,默认是显示true
      }
    var opts = a.extend(defaults, options);
    var lb_wrap = '<div class="lb_wrap"><div class="lightbox_bg"></div><div class="lightbox"><img src="loading.gif" class="lg_img"></div></div>';
    a("body").append(lb_wrap);
    //controls
    if(opts.controls){
      a(".lightbox").append('<p class="prev"></p><p class="next"></p>');
      }
    function imgobj(obj1, obj2){
      //imgObj.height是通过img对象获取的图片的实际高度
      var imgObj = new Image();
      imgObj.src = obj1.attr("src");
      var margintop = 0 - (imgObj.height)/2;
      obj2.css("margin-top",margintop);
      }
    this.each(function(){
      var obj = a(this);
      var numpic = obj.find("li").length;
      var num = 0;
      //点击赋值并显示
      obj.find("img").click(function(){
        var src = a(this).attr("src");
        a(".lg_img").attr("src",src);
        imgobj(a(".lg_img"), a(".lightbox"));
        a(".lb_wrap").fadeIn();
        a(".lg_img").fadeIn();
        a(".prev").fadeIn().siblings(".next").fadeIn();
        num = a(this).parent().index();  //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务
        });
      //上一张
      a(".prev").click(function(){
        if(num == 0){
           num = numpic;
         }
        var src = obj.find("li").eq(num-1).find("img").attr("src");
        a(".lg_img").attr("src",src);
        imgobj(a(".lg_img"), a(".lightbox"));
        num--;
        });
      //下一张
      a(".next").click(function(){
        if(num == numpic-1){
           num = -1;
        }
        var src = obj.find("li").eq(num 1).find("img").attr("src");
        a(".lg_img").attr("src",src);
        imgobj(a(".lg_img"), a(".lightbox"));
        num  ;
        });
      //点击除了上一张、下一张之外的其他地方隐藏
      a(".lb_wrap").click(function(e){
         var e = e || window.event;
         var elem = e.target || e.srcElement;
         while(elem){
           if (elem.className && elem.className.indexOf('prev')>-1) {
             return;
           }
           if(elem.className && elem.className.indexOf('next')>-1){
             return;
             }
           elem = elem.parentNode;
         }
         a(this).find("img").attr("src","loading.gif").hide(); //隐藏后,再将默认的图片赋给lightbox中图片的src
         a(this).find(".prev").hide().siblings(".next").hide();
         a(this).fadeOut();
        });
      })
    }
})(jQuery);

网页可知区域宽: document.body.clientWidth
网页可知区域高: document.body.clientHeight
网页可知区域宽: document.body.offsetWidth    (满含边线的宽)
网页可知区域高: document.body.offsetHeight   (包含边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
荧屏分辨率的高: window.screen.height
荧屏分辨率的宽: window.screen.width
显示屏可用专门的学业区中度: window.screen.availHeight
显示器可用工作区宽度:window.screen.availWidth

module.exports.Hello = function(name) {
    console.log('Hello '   name);
}

完全实例代码点击这里本站下载.rar)。

越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript查找算法技术总括》、《JavaScript动画特效与本事汇总》、《JavaScript错误与调整技能计算》、《JavaScript数据结构与算法本事总括》、《JavaScript遍历算法与本领计算》及《JavaScript数学生运动算用法计算》

(3)在外层目录实施:npm install ./helloworld,helloworld于是安装到了node_modules目录中。
(4)编写组件使用代码:

越来越多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery拖拽特效与手艺计算》、《jQuery扩展技艺计算》、《jQuery常见精湛特效汇总》、《jQuery动画与特作用法计算》及《jquery选取器用法总括》

但愿本文所述对我们JavaScript程序设计有着协理。

var m = require('helloworld');
m.Hello('zhangsan');
//输出: Hello zhangsan

企望本文所述对我们jQuery程序设计有着帮助。

您恐怕感兴趣的稿子:

  • 基于JavaScript获取鼠标地方的各个艺术
  • js获取鼠标地方实例详解
  • JavaScript中获得鼠标地点相关属性总计
  • javascript窗口宽高,鼠标地方,滚动中度(详细剖判)
  • javascript获取鼠标地点有个别的实例代码(包容IE,FF)
  • Javascript在IE或Firefox下得到鼠标地方的代码
  • JS得到鼠标地点(包容多浏览器ie,firefox)脚本之家改进版
  • js获取鼠标地点诗歌附多浏览器兼容代码
  • firefox中用javascript完成鼠标地点的原则性
  • Javascript 获取鼠标当前的职位达成格局

二、 使用v8 API达成JS组件——同步方式
 (1)编写binding.gyp, eg:

你可能感兴趣的小说:

  • Jquery达成点击切换图片并掩饰呈现内容(2种方法完结)
  • 基于jquery完结左右按钮点击的图纸切换效果
  • jquery点击缩略图切换录制播放特效代码分享
  • jQuery自动切换/点击切换选项卡效果的小例子
  • jquery达成图片放大点击切换
  • jquery点击切换背景象的大约实例
  • 利用jQuery完结鼠标点击左右开关滑动切换
  • Jquery幻灯片特效代码分享--鼠标点击按键时切换(1)
  • jQuery达成切换字体大小的点子
  • jQuery落成的点击标题文字切换字体效果示例【测量检验可用】
{
 "targets": [
  {
   "target_name": "hello",
   "sources": [ "hello.cpp" ]
  }
 ]
}

(2)编写组件的兑现hello.cpp,eg:

#include <node.h>

namespace cpphello {
  using v8::FunctionCallbackInfo;
  using v8::Isolate;
  using v8::Local;
  using v8::Object;
  using v8::String;
  using v8::Value;

  void Foo(const FunctionCallbackInfo<Value>& args) {
    Isolate* isolate = args.GetIsolate();
    args.GetReturnValue().Set(String::NewFromUtf8(isolate, "Hello World"));
  }

  void Init(Local<Object> exports) {
    NODE_SET_METHOD(exports, "foo", Foo);
  }

  NODE_MODULE(cpphello, Init)
}

(3)编写翻译组件

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:js判断鼠标位置是否在某个div中的方法,js编写组

关键词: m.lom599.com

上一篇:JavaScript设计模式经典之工厂模式
下一篇:没有了