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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
vant中的toast轻提示实现代码
Nov 04 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 filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
如何理解python面向对象编程
2020/06/01 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
查摆问题整改措施范文
2014/10/11 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
公司新员工欢迎词
2015/09/30 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书