<!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. Java 8 lambda初试

    λ表达式本质上是一个匿名方法.让我们来看下面这个例子: public int add(int x, int y) { return x + y; } 转成λ表达式后是这个样子: (int x, int ...

  2. 读书笔记 effective c++ Item 53 关注编译器发出的警告

    许多程序员常常忽略编译器发出的警告.毕竟,如果问题很严重,它才将会变成一个error,不是么?相对来说,这个想法可能在其它语言是无害的,但是在C++中,我敢打赌编译器的实现者对于对接下来会发生什么比你 ...

  3. 随机抽样一致算法（Random sample consensus，RANSAC）

    作者:桂. 时间:2017-04-25  21:05:07 链接:http://www.cnblogs.com/xingshansi/p/6763668.html 前言 仍然是昨天的问题,别人问到最小 ...

  4. [uva11992]Fast Matrix Operations（多延迟标记，二维线段树，区间更新）

    题目链接:https://vjudge.net/problem/UVA-11992 题意:n*m的矩阵,每次对一个子矩阵操作,有三种操作:加x,设置为x,查询.查询返回子矩阵和.最小值.最大值 n很小 ...

  5. CentOS 7安装Docker

    在虚拟机CentOS 7上安装Docker   ## 零:检查前提条件:   在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多.     ### 1.内 ...

  6. 清北Day4

    版权声明:如需转载请标明出处,未得到本人许可请勿转载. 今天就可以看到传说中的 数据结构 嘿嘿嘿嘿 都有什么呢 链表 队列 栈 st表 hash 线段树 树链剖分 一.栈: 放出来这个看烂了的图 值得 ...

  7. hdu1711kmp

    Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM (1 <= M <= ...

  8. java线程（二）

    线程范围变量 我们知道线程在cpu上的使用权并不是长时间的,因为计算机的cpu只有一个,而在计算上运行的进程有很多,线程就更不用说了,所以cpu只能通过调度来上多个线程轮流占用cpu资源运行,且为了保 ...

  9. 转载 ~shell简介

    Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...

  10. 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...