<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#du{
width: 1200px;
height: 800px;
margin: 100px;
position: relative;

}

.small{
position: absolute;
width: 260px;
height: 140px;
left: 0px;
top: 0px;
}
.sz{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background: rgba(233,23,233,0.4);
display: none;

}
.small img{
width: 260px;
height: 140px;
}
.big{
margin-left: 20px;
position: absolute;
left: 260px;
top: 0px;
display: none;
}
.big .dz{
width: 400px;
height: 400px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.big img{
width: 1040px;
height:560px;

}
</style>
<script type="text/javascript">
window.onload = function(){

var oSmall = document.getElementsByClassName('small')[0];
var oBig = document.getElementsByClassName('big')[0];
var oSz = document.getElementsByClassName('sz')[0];
var oDz = document.getElementsByClassName('dz')[0];
var oImg = document.getElementsByTagName('img')[1];
var _left = 0;
var _top = 0;
oSmall.onmouseover = function(){
oBig.style.display='block';
oSz.style.display = 'block';

};
oSmall.onmousemove = function(evt){
var e = evt || event;
// alert(oSmall.offsetLeft)
_left = e.clientX - 100 - oSz.offsetWidth/2;
_top = e.clientY- 100 - oSz.offsetHeight/2;

if(_left<0){
_left=0;
}else if(_left>oSmall.offsetWidth-oSz.offsetWidth){
_left = oSmall.offsetWidth-oSz.offsetWidth;
}
if(_top<0){
_top=0;
}else if(_top>oSmall.offsetHeight-oSz.offsetHeight){
_top = oSmall.offsetHeight-oSz.offsetHeight;
}
oSz.style.left = _left+'px';
oSz.style.top = _top+'px';

oImg.style.marginLeft= -4 * _left+'px';
oImg.style.marginTop = -4 * _top+'px';
};
oSmall.onmouseout = function(){
oBig.style.display='none';
oSz.style.display = 'none';

};

};
</script>
</head>
<body>
<div id="du">
<div class="small">
<div class="sz"></div>
<img src="0.jpg">
</div>
<div class="big">
<div class="dz">
<img src="0.jpg">
</div>

</div>
</div>
</body>
</html>

放大镜原生js的更多相关文章

  1. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  2. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  6. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  9. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

随机推荐

  1. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  2. Windows 和 Mac 系统下安装git 并上传，修改项目

    首先在MAC上怎么操作. 在gitHub创立一个账户,在创立一个项目,这就不用我说了对吧. 创建完之后是这样的: 接下来,我们打开https://brew.sh 这是下载homebrew的网站,hom ...

  3. list、set、map区别

    list是有序且重复的; list中的数据都是按照写入的顺序排列的,存入list的数据用add方法写入; list可以用循环遍历list以达到获取全部数据的目的,同时也可以通过下标get(index) ...

  4. get和post提交数据的区别

    get是客户端向服务器索取数据的请求,设定的初衷是,客户端(浏览器)给服务器发送请求,然后服务器再返回给客户端其要求的数据. 那么为什么说get也能提交数据呢? 我们仔细理解第一句话“客户端(浏览器) ...

  5. 蓝桥杯-写日志-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. Jenkins + Maven + Ansible + Tomcat 实现JAVA代码自动部署

    自动部署过程: jenkins从svn拉取代码,调用maven去打war包,用ansible去解压war包,最后重启tomcat. 前情回顾:在前面的文章我的环境已经有Jenkins+ansible ...

  7. [js笔记整理]事件篇

    一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...

  8. zabbix监控docker

    [toc] 1.下载模版 然后把模版放到/usr/local/lib/zabbix/agent下 github地址内含监控模版 2.修改 zabbix-agentd 配置文件 vim /usr/loc ...

  9. Servlet简单总结（一）

    一.Servlet简单总结 1.1. 什么是Servlet Servlet是JavaEE三大组建之一,是使用Java语言编写服务器端的程序,主要用来处理Web应用程序中的请求-响应.Servlet并没 ...

  10. ZED 相机 && ORB-SLAM2安装环境配置与ROS下的调试

    注:1. 对某些地方进行了更新(红色标注),以方便进行配置. 2. ZED ROS Wrapper官方github已经更新,根据描述新的Wrapper可能已经不适用与Ros Indigo了,如果大家想 ...