用JS实现购物网站商品放大镜效果_JSP编程

放大镜效果就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style>
 *{margin:0;padding: 0;}
 #warp{width: 1184px;height:500px;margin:50px auto 0;background-color: #ccc;overflow: hidden;padding: 10px;position: relative;}
 #warp #minbox{width: 350px;height: 350px;float: left;position: relative;}
 #maxbox{width: 400px;height: 400px;position: absolute;left: 380px;overflow: hidden;display: none;}
 #maxbox img{width: 800px;height: 800px;position: absolute;}
 #con{float: left;margin-left: 20px;}
 #meng{width: 175px;height: 175px;position: absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left: 0;top: 0;display: none;}
 </style>
</head>
<body>
 <div id="warp">
 <div id="minbox">
  <img src="images/min.jpg" alt="">
  <p id="meng"></p>
 </div>
 <div id="maxbox">
  <img src="images/max.jpg" alt="">
 </div>
 <div id="con">
  <img src="images/msg.png" alt="">
 </div>
 </div>
 <script>
 var minbox=document.getElementById('minbox');
 var meng=document.getElementById('meng');
 var maxbox=document.getElementById('maxbox');
 var maximg=maxbox.getElementsByTagName('img')[0];
 var minimg=minbox.getElementsByTagName('img')[0];
 function offsetTL(obj){
  var ofL=0,ofT=0;
  while(obj){
  ofL+=obj.offsetLeft+obj.clientLeft;
  ofT+=obj.offsetTop+obj.clientTop;
  obj=obj.offsetParent;
  }
  return{left:ofL,top:ofT};
 }
 minbox.onmousemove=function(e){
  var e=e||window.event;
  meng.style.display='block';
  maxbox.style.display='block';
  var niubi1=e.clientX-offsetTL(minbox).left-meng.clientWidth/2;//蒙板的X坐标
  var niubi2=e.clientY-offsetTL(minbox).top-meng.clientHeight/2;//蒙板的Y坐标
  var bili=maximg.clientWidth/minimg.clientWidth;
  if (niubi1<=0) {
  niubi1=0;
  }else if (niubi1>=minbox.clientWidth-meng.clientWidth) {
  niubi1=minbox.clientWidth-meng.clientWidth;
  }
  if (niubi2<=0) {
  niubi2=0;
  }else if (niubi2>=minbox.clientHeight-meng.clientHeight) {
  niubi2=minbox.clientHeight-meng.clientHeight;
  }
  console.log(niubi1);
  console.log(niubi2);
  meng.style.left=niubi1+'px';
  meng.style.top=niubi2+'px';
  maximg.style.left=-parseInt(meng.style.left)*bili+'px';
  maximg.style.top=-parseInt(meng.style.top)*bili+'px';
 }
 minbox.onmouseout=function(){
  meng.style.display='none';
  maxbox.style.display='none';
 }
 </script>
</body>
</html>

效果如下:

希望本文所述对大家javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js放大镜效果
, js放大镜原理
js放大镜
商品放大镜效果、商品放大镜、商品放大镜插件、友价源码t5商品放大镜、jquery 商品放大镜,以便于您获取更多的相关知识。

时间: 2024-10-16 11:40:06

用JS实现购物网站商品放大镜效果_JSP编程的相关文章

javascript淘宝网站图片放大镜效果

js实现百度地图同时显示多个路书效果_JSP编程

本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下: 启动路书: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> <script type="text/javascript" src="js/lushu.js"&g

使用JS显示倒计时数字时钟效果_JSP编程

本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

JavaScript实现城市选择控件的效果_JSP编程

在淘宝旅行上看到的城市选择效果,感觉还不错,就自己的理解重新实现一遍,先看效果(有人说IE9下面有BUG,LZ用的是落后的XP,居然装不上IE9,去公司在搞搞好了),然后再细说实现原理,支持鼠标上下键选择城市,支持直接输入城市名称,拼音首字母,全拼,支持IE6遮盖SELECT,压缩后12K. 实现的步骤: 一.先用一定的格式罗列出控件所需要的城市以及拼音等,我这里是按照如下格式罗列成一个数组, 如果需要增加城市,直接增加在数组里面即可: 城市我是一个一个手打的... ['北京|beijing|b

关于购物网站技术疑问~

问题描述 关于购物网站商品列表图片加载问题,我看是类似一种懒加载的形式,是如何实现的?请大侠们指点下哈~ 解决方案 先留出占位符.再通过JS控制其加载,请参考:http://www.google.com/search?hl=zh-CN&source=hp&biw=&bih=&q=lazyload+image&btnG=Google+%E6%90%9C%E7%B4%A2

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

JS实现的放大镜效果

JS实现的放大镜效果,如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml">         <head>      

查找商品价格信息购物网站有绝对的优势

查找商品的价格信息还是到购物网站的垂直搜索上比较好查找,用百度.Google不好使.比如在PcOnline查找电脑的价格信息.在国内CtoC市场,淘宝有绝对的优势,在产品信息方面非常丰富,其他要挑战淘宝的地位路还很漫长. 今天早上同学叫我帮忙查一下一种绣有梅兰竹菊的湘绣的在网上的大概报价,我首先用百度和Google搜索了一下,百度和Google搜录的关于湘绣的网页还是蛮多的:百度:200000,Google:181000. 不能直接在搜索结果中找到我需要的结果,我就用组合关键词"湘绣 梅兰竹菊&

在android平台上,搜索几个购物网站中的某个商品,将信息显示在一个列表中

问题描述 在android平台上,搜索几个购物网站中的某个商品,将信息显示在一个列表中 在android平台上,搜索几个购物网站中的某个商品,将信息显示在一个列表中 解决方案 http://www.docin.com/p-635394364.html