<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs" Inherits="test.demo4" %>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>放大镜</title>

<meta name="keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

body,div,img {padding:0;margin:0;}

.con {width:256px;height:192px;float:left;}

.con img {width:256px;height:192px;position:absolute;border:1px blue solid;}

.dingwei {position:absolute;width:100px;height:100px;background-color:black;filter:alpha(opacity=20);opacity:0.2;cursor:move;display:none;}

.big {float:left;width:400px;height:400px;margin:100px;overflow:hidden;}

</style>

</head>

<body>

<div class="con" id="father" style="position:relative;">

<img src="img/2.jpg" alt="图片"/>

<div id="aa" class="dingwei">&nbsp;</div>

</div>

<div class="big" id="bpic">

<div class="inside"><img src="img/2.jpg" alt="图片"/></div>

</div>

<script type="text/javascript">

var divs = document.getElementById("aa");

 var fa = document.getElementById("father");

var maxWidth = maxHeight = S = 0;

  var big = document.getElementById("bpic");

 fa.onmouseover = function () {

 divs.style.display = "block";

 big.style.display = "block";

  S = divs.offsetHeight / 2;

maxWidth = fa.clientWidth - divs.offsetWidth;

 maxHeight = fa.clientHeight - divs.offsetHeight; //物块的活动范围；

   }

fa.onmousemove = function (e) {

 a = e || window.event;

  var sbX = a.clientX;

  var sbY = a.clientY;

var num = big.clientWidth / divs.clientWidth;

  var lf = sbX - S; //鼠标的位置减去元素位置的一半的值就是元素的定位值；

var tp = sbY - S;

 //tp =tp<0?0:tp>maxHeight?maxHeight:tp;

 //lf =lf<0?0:lf>maxWidth?maxWidth:lf;//判断物块的定位位置然后进行设置

 if (tp < 0) { tp = 0; }

else {

 if (tp > maxHeight) { tp = maxHeight; }

  else { tp = sbY - S; }

 }

  //判断物块的位置进行设置

   if (lf < 0) { lf = 0; }

else {

  if (lf > maxWidth) { lf = maxWidth; }

else { lf = sbX - S; }

 }

divs.style.left = lf + "px";

 divs.style.top = tp + "px";

big.scrollLeft = num * lf;

big.scrollTop = num * tp;

 }

fa.onmouseout = function () {

divs.style.display = "none";

  big.style.display = "none";

}

</script>

</body>

</html>

jS放大镜效果的更多相关文章

  1. 最全js 放大镜效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js放大镜效果

    效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  5. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  6. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  7. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  8. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  9. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. 变身windows达人，用运行命令直接启动所有应用程序

    先看一下效果 在”运行“输入QQ,敲回车即打开登录窗口,相当于双击QQ登录快捷方式,对于码农.电脑一族这是不是一件高逼格,很酷的事?你甚至可以将任何你想设置命令启动的程序用该方式启动,比如敲chrom ...

  2. 【Android实战开发】3G技术和Android发展简介

    随着移动设备的不断普及和发展,相关软件的开发也越来越受到人们的关注,其中要提及的就是Android开发.本系列博客主要为大家介绍Android的开发,可能会有人问:现在互联网上已经有很多的Androi ...

  3. Scala开启之旅

    嘿嘿,公司最近需要测试SPARK性能,赶上了.. 那LUA之后,SCALA也简单看看,,, 其实,我三月时买了本129元的SPARK的书,,全国只那一本哈. package com.hengheng. ...

  4. MV规范 ---ISO7816 T=1协议的时间特性

    终端发送的连续字符之间的时间间隔应在11etu域42etu之间,卡片应能正确接收终端发送的时间间隔为11.8+Netu的连续字符. 卡片发出的连续字符之间的时间间隔最小为11etu,终端应能正确接收卡 ...

  5. POJ1068 Parencodings(模拟)

    题目链接. 分析: 水题. #include <iostream> #include <cstdio> #include <cstring> using names ...

  6. BZOJ 1020 [SHOI2008]安全的航线flight

    1020: [SHOI2008]安全的航线flight Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 847  Solved: 286[Submit][ ...

  7. Delphi HTTPRIO控件怎么设置超时参数

    HTTPRIO控件怎么设置超时参数 //HTTPRIO1: THTTPRIO  设置5分钟超时 HTTPRIO1.HTTPWebNode.ConnectTimeout := 5000; Connect ...

  8. 自定义VIew——漂亮的圆形进度条

    package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...

  9. 在Eclipse中新建Maven项目

    关于Maven的好的资料: Apache官网:http://maven.apache.org/ Apache Maven 入门篇 ( 上 ):http://www.oracle.com/technet ...

  10. I - Strategic Game - hdu 1054(最小点覆盖)

    题意:用最小的点来覆盖全部的边,因为二分图里面最大的匹配就是最小覆盖,所以直接匹配一下即可 ****************************************************** ...