这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
大家在日常生活中都有网购的经验,有的网站会有商品放大镜功能,效果非常棒,那么基于 js 代码是如何实现的呢?下面小编给大家带来了基于 js 实现购物网站商品放大镜效果,非常不错,感兴趣的朋友参考下吧
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考。
- <!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 实现购物网站商品放大镜效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0520/332057.html