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 相关文章推荐
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
浅谈document.write()输出样式
May 07 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
Vue scoped及deep使用方法解析
Aug 01 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正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python奇偶行分开存储实现代码
2018/03/19 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
个人安全承诺书
2014/05/22 职场文书
个人授权委托书范文
2014/09/21 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年督导工作总结
2014/11/19 职场文书
培训班通知
2015/04/25 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers