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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js倒计时小程序
Nov 05 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 Javascript
利用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中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python代码太长换行的实现
2019/07/05 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python中return如何写
2020/06/18 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
如何在Shell脚本中使用函数
2015/09/06 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
上学迟到的检讨书
2014/01/11 职场文书
学校安全责任书
2014/04/14 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
个人收入证明模板
2014/09/18 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
六查六看心得体会
2014/10/14 职场文书
2015年新农合工作总结
2015/03/30 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
我去timi了,一起去timi是什么意思?
2022/04/13 杂记