这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了原生 js 实现放大镜效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
原理:左边阴影在左边图片上从左到右移动的时候,右边大框也在右边大图片上从左到右移动(尽管在视觉、原理和代码上是相反的);所谓放大,其实就是一张原本就很小的图对应一张原本就很大的图。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .small{
- width: 400px;
- height: 400px;
- position: relative;
- background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
- border: 1px solid #ccc;
- }
- .small .inner{
- width: 100px;
- height: 100px;
- background: yellow;
- opacity: 0.5;
- filter: alpha(opacity=50);
- position: absolute;
- left:0;
- top:0;
- display: none;
- }
- .big{
- width: 400px;
- height: 400px;
- position: absolute;
- left:410px;
- top:0;
- overflow: hidden;
- border: 1px solid #ccc;
- display: none;
- }
- .big img{
- width: 200%;
- height: 200%;
- position: absolute;
- left:0;
- top:0;
- }
- </style>
- </head>
- <body>
- <div id="small" class="small">
- <div class="inner"></div>
- </div>
- <div id="big" class="big">
- <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
- </div>
- <script>
- var small=document.getElementById('small');
- var inner=small.getElementsByTagName('div')[0];
- var big=document.getElementById('big');
- var img=big.getElementsByTagName('img')[0];
- //当鼠标移入small的时候,inner和big显示
- small.onmouseover=function(){
- big.style.display='block';
- inner.style.display='block';
- };
- //当鼠标在small移动的时候:1)鼠标在inner的中间 2)inner跟随鼠标移动
- small.onmousemove=function(e){
- e=e||window.event;
- var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
- var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
- if(left<=0){
- left=0;
- }else if(left>=this.offsetWidth-inner.offsetWidth){
- left=this.offsetWidth-inner.offsetWidth
- }
- if(top<=0){
- top=0;
- }else if(top>=this.offsetHeight-inner.offsetHeight){
- top=this.offsetHeight-inner.offsetHeight
- }
- inner.style.left= left+'px';
- inner.style.top= top+'px';
- //当inner移动的时候,大图跟着一起移动,并且,大图和inner移动的方向相反;
- //或者理解为:左边阴影在图片上从左到右移动的时候,右边大框也在大图片上从左到右移动(尽管视觉上是相反的)。
- img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
- img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
- };
- //当鼠标移出的时候,inner和big隐藏;
- small.onmouseout=function(){
- big.style.display='none';
- inner.style.display='none';
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0529/327451.html