原生js简单实现放大镜特效


Posted in Javascript onMay 16, 2017

本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下

普及知识:放大镜特效涉及到的几个值

offsetWidth    获取元素的宽度
offsetHeight  获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop  内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove  鼠标移动事件
onmouseover  鼠标划过事件

主要思路:

    1.鼠标移动,阴影区跟着移动
    2.鼠标移动,大图也跟着移动
    3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
    4.保证阴影区域以及大div.big在鼠标移动到div.small时显示

html实现

<div id="fangdajing">
    <div class="small">
      <img src="small.jpg" alt="">
      <div class="shadow"></div>
    </div>
    <div class="big">
      <img src="big.jpg" alt="">
    </div>
  </div>

css样式

//定位,大图显示区域和阴影区域最开始不显示
#fangdajing{
      width:450px;
      height:450px;
      position:relative;
    }
    .small{
      width:450px;
      height:450px;
      position:absolute;
      left:0px;
      top:0px;
    }
    .shadow{
      width:200px;
      height:200px;
      background:yellow;
      opacity:0.3;
      position:absolute;
      top:0;
      left:0;
      display:none;
    }
    .big{
      position:absolute;
      left:450px;
      width:356px;
      height:356px;
      overflow:hidden;
      display:none;
    }

js实现

1.获取对象

var fdj = document.getElementById('fangdajing');
var big = document.getElementsByClassName('big')[0];
var small = document.getElementsByClassName('small')[0];
var shadow = document.getElementsByClassName('shadow')[0];

2.鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域

small.onmouseover = function(){
        big.style.display = 'block';
        shadow.style.display = 'block';
  }

3.

(1)鼠标移动,div.shadow跟着移动,先获取到shadow在small内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及shadow的宽高,让鼠标划过的位置一直位于shadow区域的中心点,所以可得shadow在small内的相对位置,之后进行判断,让shadow不能出边界,最后进行赋值操作

(2)shadow区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和shadow的比例为big.offsetWidth/shadow.offsetWidth,以shadow的左上角为准,大图的滚动距离为left*相应比例

small.onmousemove = function(ent){
    var e = ent || event;  //获取鼠标事件对象
    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //获取shadow在small内的相对位置
    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
    var tw = fdj.offsetWidth - shadow.offsetWidth; //获取shadow最大可移动距离
    var th = fdj.offsetHeight - shadow.offsetHeight; 
    //对shadow进行限制
    if(left < 0){
      left = 0;      
    }else if(left > tw){
      left = tw;
    }
     if(top < 0){
      top = 0;      
    }else if(top > th){
      top = th;
    } 
    //赋值
    small.style.left = left + 'px';
    small.style.top = top + 'px';    
    //大图跟着移动
    var sl = left * big.offsetWidth / shadow.offsetWidth;
    var st = top * big.offsetHeight / shadow.offsetHeight;
    big.scrollTop = st;
    big.scrollLeft = sl; 
  }

4.鼠标移出,大图以及shadow隐藏

small.onmouserout = function(){
    big.style.display = 'none';
    shadow.style.display = 'none';    
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
7个JS基础知识总结
2014/03/05 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python3实现基于用户的协同过滤
2018/05/31 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
西部世纪面试题
2014/12/05 面试题
成语的广告词
2014/03/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
超级详细实用的pycharm常用快捷键
2021/05/12 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python