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游戏之是男人就下100层代码打包
Nov 08 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
详解JS中的柯里化(currying)
Aug 17 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
js的对象与函数详解
Jan 21 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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中ob_start()函数的用法
2013/06/24 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python实现二叉搜索树
2016/02/03 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python tornado微信开发入门代码
2018/08/24 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python操作cfg配置文件方式
2019/12/22 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python的Jenkins接口调用方式
2020/05/12 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
英文商务邀请信
2014/01/22 职场文书
《胡杨》教学反思
2014/02/16 职场文书
实习生工作证明范本
2014/09/14 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
python可视化之颜色映射详解
2021/09/15 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
golang定时器
2022/04/14 Golang