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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
利用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
laravel中的错误与日志用法详解
2016/07/26 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jQuery基础知识点总结(必看)
2016/05/31 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
python选择排序算法的实现代码
2013/11/21 Python
python实现自动发送邮件
2018/06/20 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
市三好学生主要事迹
2014/01/28 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
廉洁使者实施方案
2014/03/29 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
Python采集壁纸并实现炫轮播
2022/04/30 Python