<!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. 详解 Node + Redux + MongoDB 实现 Todolist

    前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...

  2. LINQ TO XML初步了解

    最近简单的学习了一下LINT TO XML,写篇博客在这,方便以后查看~~ 1.常用到的类   XmlDocument --    文档(xml文件)     XmlElement    --     ...

  3. Kruskal和Prim算法求最小生成树

    Kruskal算法求最小生成树 测试数据: 5 6 0 1 5 0 2 3 1 2 4 2 4 2 2 3 1 1 4 1 输出: 2 3 1 1 4 1 2 4 2 0 2 3 思路:在保证不产生回 ...

  4. php头像上传预览

    php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...

  5. NSString类

    创建一个字符串 ) NSString *s = @"aaaa"; ) NSString *s1=[NSString new]; s1=@"bbb"; )格式化创 ...

  6. IDEA2017使用Maven方式配置Mybatis-Generator

    一,创建Maven项目 至此Maven项目创建完成. 二,在Maven项目的pom.xml中添加mybatis-generator-maven-plugin插件 创建Maven项目后,打开pom.xm ...

  7. 开源库RxJava、ButterKnife学习记录

    1. 简介 RxJava "RxJava is a Java VM implementation of Reactive Extensions: a library for composin ...

  8. MYSQL CASE WHEN THEN END 用法

    SELECT qr_cash_record.*,CASE WHEN cashrecord_type = 3 THEN (SELECT product_title FROM qr_fundsupport ...

  9. foreach底层机制

    简单例子 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: public class Simple { public static void main(String ...

  10. 微信小程序开发流程

    2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线,一夜之间,小程序可谓家喻户晓,但通过接下来的几个月的观察,微信小程序并没有想象中的那么火爆.进入4月以来,微信小程序团队进行 ...