js仿淘宝商品放大预览功能


Posted in Javascript onMarch 15, 2017

将鼠标移动至图片区域可放大预览

效果图:

js仿淘宝商品放大预览功能

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{padding:0; margin:0;}
    #img1{width:300px; height:200px;}
    #sp1{width:60px; height:40px; position: absolute; left:0; top:0; background: rgba(62, 55, 58, 0.4)
    }
    #img2{width:2250px; height:1500px; position: absolute;}
    div{width:450px; height:300px; position: absolute; left:310px; top:0; overflow: hidden; border:2px solid black; display: none;}
  </style>
  <script>
    window.onload=function(){
      var img1 = document.getElementById('img1');
      var img2 = document.getElementById('img2');
      var sp = document.getElementById('sp1');
      var oBox = document.getElementById('box');
      sp.onmouseover=function(){
        oBox.style.display='block';
      };
      sp.onmouseout=function(){
        oBox.style.display='none';
      };
      document.onmousemove=function(ev){
        var x = (ev.clientX || event.clientX)-sp.offsetWidth/2;
        var y = (ev.clientY || event.clientY)-sp.offsetHeight/2;
        if((ev.clientX || event.clientX)<sp.offsetWidth/2){
          x = 0;
        }
        if((ev.clientX || event.clientX)>img1.offsetWidth-sp.offsetWidth/2){
          x = img1.offsetWidth-sp.offsetWidth;
        }
        if((ev.clientY || event.clientY)<sp.offsetHeight/2){
          y = 0;
        }if((ev.clientY || event.clientY)>img1.offsetHeight-sp.offsetHeight/2){
          y = img1.offsetHeight-sp.offsetHeight;
        }
        if((ev.clientX || event.clientX)<300 && (ev.clientY || event.clientY)<200) {
          sp.style.left = x + 'px';
          sp.style.top = y + 'px';
          img2.style.left = -x * (img2.offsetWidth / img1.offsetWidth) + 'px';
          img2.style.top = -y * (img2.offsetHeight / img1.offsetHeight) + 'px';
        }
      }
    }
  </script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img1">
<span id="sp1"></span>
<div id="box">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img2">
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 #Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 #Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 #Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
浅析javascript的return语句
2015/12/15 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jQuery设计思想
2017/03/07 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python实现textrank关键词提取
2018/06/22 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python中安装django模块的方法
2020/03/12 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
几个人围成一圈的问题
2013/09/26 面试题
政工例会汇报材料
2014/08/26 职场文书
赔偿协议书范本
2014/09/12 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
班主任寄语2015
2015/02/26 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
负责培养人意见
2015/06/05 职场文书
Python列表的索引与切片
2022/04/07 Python