<%@ 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. Delphi应用程序的调试（十）调试器选项（在IDE中不要使用异常）

    可在两个级别上设置调试选项:工程级和环境级.在前面的讲解中讲解了工程级调试选项,通过主菜单[Project | Options…]打开如下对话框: 可在Debugger Options对话框中设置全局 ...

  2. listView中setOnItemClickListener和getSelectedItemPosition()取不到position问题

    //也可以采用通过listview 索引 取得 item 可以转化到 cursor ,pos 是在listview 的选中事件中赋值. //Cursor v2 = (Cursor) listView. ...

  3. android 状态栏(StatusBar)

    一.SystemUI 概述 自 android2.2 开始 , 原本存在与 framework-res.apk 中的状态栏和下拉通知栏界面控制被分割出一个单独的 apk 文件 , 命名为 System ...

  4. POJ1836 Alignment(LIS)

    题目链接. 分析: 从左向右求一遍LIS,再从右向左求一遍LIS,最后一综合,就OK了. 注意: 有一种特殊情况(详见discuss): 8 3 4 5 1 2 5 4 3 答案是:2 AC代码如下: ...

  5. 最近点对问题 HDU Quoit Design 1007 分治法

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...

  6. HttpURLConnection和HttpClient

    HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.在 JDK 的 java.net 包中已经提供了访问 ...

  7. Java学习日记9-异常

    异常(Exception) 一.什么是异常? 异常就是程序中的错误,比如数组越界.访问空指针等.在Java中,一切皆对象,异常也不例外.所有的异常都是派生于Throwable类的一个实例对象. 二.异 ...

  8. [Design Pattern] Proxy Pattern 简单案例

    Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...

  9. iOS利用Runtime自定义控制器POP手势动画

    前言 苹果在iOS 7以后给导航控制器增加了一个Pop的手势,只要手指在屏幕边缘滑动,当前的控制器的视图就会跟随你的手指移动,当用户松手后,系统会判断手指拖动出来的大小来决定是否要执行控制器的Pop操 ...

  10. 比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架

    比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架,如果做APP客户端的化,想达到Native UI的效果,都是胡扯的,根本不可能. PhoneGAP 如果想达 ...