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 参数中的数组展开 [译]
Sep 21 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
Html5生成验证码的示例代码
May 10 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实现维护文件代码
2007/06/14 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
限制复选框的最大可选数
2006/07/01 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
js实现继承的5种方式
2015/12/01 Javascript
解析js如何获取css样式
2016/12/11 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python 多维List创建的问题小结
2019/01/18 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
商务英语专业自荐信
2013/10/14 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
中学生励志演讲稿
2014/04/26 职场文书