<!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. linux网络编程（socket）之面向连接（TCP/IP）

    1.流程 服务器: 创建socket: 绑定端口: 监听: 监听到有连接请求,接受请求: 建立连接,开始对话. 客户端: 创建socket: 请求建立连接: 连接建立成功,开始对话. 2.实例代码 / ...

  2. C语言学习第七章

    今天开始学习指针,指针在C语言中具有很重要的地位,按照老师所说,学C学不好指针跟没学一样,可见指针在C语言中的重要地位.废话不多说,首先我们先要知道什么是指针. 指针:指针是一个变量,它存储另一个对象 ...

  3. C#中 dynamic 关键字

       所有表达式都能隐式的转换成dynamic,因为所有的表达式最终都能生成从Object派生出的类型. ; int b = a; //隐式转换错误 int b2 = (int)a; ; int b3 ...

  4. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  5. Scraping_regex

    上面链接爬虫只是能将我们所需的网页下载下来,但是,我们没办法得到我们想要的数据.因此,我们只有URL管理器和URL下载器是不足以组成一个完整的网络爬虫的.我们还需要URL解析器,对数据进行提取. 数据 ...

  6. .Net程序员学用Oracle系列(24)：数据字典、死锁

    1.静态数据字典 1.1.实用静态数据字典 1.2.运用静态数据字典 2.动态数据字典 2.1.实用动态性能视图 2.2.运用动态性能视图 3.死锁 3.1.定位死锁 3.2.解锁方法 3.3.强制删 ...

  7. 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化

    联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...

  8. 新手在WindowsServer2016上安装ExchangeServer2016时的几点注意要点。

    这两天试着在WindowsServer2016上安装ExchangeServer2016,遇到了两个头疼的问题,还好几经搜索加摸索终于把问题解决了,现在把经验分享出来,给遇到同样的问题的人以参考.在W ...

  9. 也许是目前实现最好的js模拟滚动插件

    finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...

  10. MySQL编译安装错误提示合集

    1>安装mysql在初始化的时候,出现/usr/local/mysql/bin/mysqld:error while loading shared libraries:libaio.so.1 : ...