这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 Javascript 实现放大镜效果实例详解的相关资料, 这里附有实现实例代码,具有参考价值,需要的朋友可以参考下
Javascript 实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下 html 结构!
- <div id="pic_wrap">
- <div id="float_box"></div>
- <img src="1.jpg">
- </div>
- <div id="show">
- <img src="1.jpg" id="big_img">
- </div>
最外层的两个 div,分别是商品原始图片区域,和放大后的可视区域!id 为 float_box 的区域为放大镜所示的区域!第一个 img 为商品图片,第二个 img 为预留的放大后的商品!图片 CSS 代码如下!
- img {
- width: 250px;
- height: 150px;
- }
- #pic_wrap {
- position: relative;
- width: 250px;
- height: 150px;
- }
- #float_box {
- width: 100px;
- height: 100px;
- background-color: green;
- filter: opacity(alpha: 30);
- opacity: 0.3;
- position: absolute;
- display: none;
- }
- #big_img {
- background-image: url(1.jpg);
- height: 450px;
- width: 750px;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
- }
- #show {
- width: 300px;
- height: 300px;
- background-color: white;
- opacity: 1;
- filter: opacity(alpha:1);
- overflow: hidden;
- display: none;
- }
HTML 和 CSS 写好之后,就要利用 js 给放大镜加一些交互效果!
第一步,当鼠标移入的时候,放大镜能够显示出来!需要加 onmouseover 事件。
第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加 onmousemove 事件。
第三步,当鼠标完全移除后,需要加 onmouseout 事件。
第四步,onmouseover 事件需要让放大镜和可视窗口显示出来。
第五步,onmousemove 事件,让放大镜和可视窗口中的图片同时移动。
第六步,onmouseout 时间,让放大镜和可是窗口消失!
完整代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style type="text/css">
- /*body {
- margin: 0;
- padding: 0;
- }*/
- img {
- width: 250px;
- height: 150px;
- }
- #pic_wrap {
- position: relative;
- width: 250px;
- height: 150px;
- }
- #float_box {
- width: 100px;
- height: 100px;
- background-color: green;
- filter: opacity(alpha: 30);
- opacity: 0.3;
- position: absolute;
- display: none;
- }
- #big_img {
- background-image: url(1.jpg);
- height: 450px;
- width: 750px;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
- }
- #show {
- width: 300px;
- height: 300px;
- background-color: white;
- opacity: 1;
- filter: opacity(alpha:1);
- overflow: hidden;
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="pic_wrap">
- <div id="float_box"></div>
- <img src="1.jpg">
- </div>
- <div id="show">
- <img src="1.jpg" id="big_img">
- </div>
- <script src="等比放大镜.js"></script>
- <script type="text/javascript">
- var pic_wrap = document.getElementById('pic_wrap'),
- float_box = document.getElementById("float_box"),
- show = document.getElementById('show');
- big_img = document.getElementById("big_img");
- //鼠标移入事件,让放大镜和放大区显示!
- pic_wrap.onmouseover = function() {
- float_box.style.display = "block";
- show.style.display = "block";
- }
- //鼠标不断移动时触发,实时更新放大镜得到的图片
- pic_wrap.onmousemove = function(event) {
- floatMove(float_box, pic_wrap, event);
- showPic();
- }
- //鼠标移出后,放大镜和放大区隐藏
- pic_wrap.onmouseout = function() {
- float_box.style.display = "none";
- show.style.display = "none";
- }
- //由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!
- function getStyle(obj, attr) {
- if (window.currentStyle) {
- return parseInt(obj.currentStyle[attr]);
- }
- else {
- return parseInt(getComputedStyle(obj,null)[attr]);
- }
- }
- //运动框架,控制放大镜在原图中的位置!
- function floatMove(argu1, argu2, event) {
- var e = event ||window.event;
- var minLeft = getStyle(argu1, "width");
- var maxLeft = getStyle(argu2, "width") - minLeft/2;
- var minHeight = getStyle(argu1, "height");
- var maxHeight = getStyle(argu2, "height") - minHeight/2;
- console.log(maxLeft);
- console.log(maxLeft - minLeft/2);
- if (e.clientX < minLeft/2) {
- float_box.style.left = "0px";//防止放大镜超出左边框
- }
- else if (e.clientX > maxLeft) {
- float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
- }
- else {
- float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
- }
- if (e.clientY < minHeight/2) {
- float_box.style.top = "0px"; //防止放大镜超出上边框
- }
- else if (e.clientY > maxHeight) {
- float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
- }
- else {
- float_box.style.top = event.clientY - minLeft/2 + "px";
- }
- }
- //用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域
- function showPic() {
- var iCurLeft = getStyle(float_box,"left");
- var iCurTop = getStyle(float_box,"top");
- var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
- var b = getStyle(big_img,"width") - getStyle(show,"width");
- var moveWidth = -(iCurLeft/a)*b;
- big_img.style.left = moveWidth + "px";
- var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
- var d = getStyle(big_img,"height") - getStyle(show,"height");
- var moveHigth = -(iCurTop/c)*d;
- big_img.style.top = moveHigth + "px";
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0523/329919.html