<%@ 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. Spring ApplicationContext的国际化支持

    ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...

  2. Hibernate的查询语言之HQL(二)——Hibernate查询的from字句

    from 是最简单的HQL语句,也是最基本的HQL语句.from 关键字后紧跟持久化类的类名.例如: from Person 表明从Person持久化类中取出全部的实例. 大部分时候,推荐位该Pers ...

  3. 转：nginx防DDOS攻击的简单配置

    文章来自于: 近期由于工作需要,做了些防DDOS攻击的研究,发现nginx本身就有这方面的模块ngx_http_limit_req_module和ngx_http_limit_conn_module. ...

  4. 利用readwritelock简单模拟实现多线程下cache的系统

    package cn.lyy.hibernate.many2one; import java.util.HashMap; import java.util.Map; import java.util. ...

  5. 关于LEA指令（单周期就可以做简单的算术计算）

    堆栈种分配的局部变量所谓的“标号”,你以为是什么?(都是那些该死的宏惹的祸,大家要都是老老实实写代码,就不会有这些疑问了).      比如你用local在栈上定义了一个局部变量LocalVar,你知 ...

  6. ehci符合USB2.0，uhci，ohci，

    uhci   ohci   ehci他们都是主机控制器的规格,OHCI主要为非PC系统上以及带有SiShe ALi芯片组的 PC主板上的USB芯片,UHCI大多为Intel和Via主板上的USB控制器 ...

  7. Android的布局优化之include、merge 、viewstub

    以前在写布局的时候总是喜欢用自己熟悉的方式去写,从来也没有想过优化怎么的,后来又一次在上班的时候老大拿着我写的一个页面说我这个不行.我说这不是和设计图上的一模一样的么?怎么就不行了?然后他就跟我说了一 ...

  8. jsp servelet

    servlet是java web应用程序. 1.生命周期:init() .service().destroy()方法. 其中service()包括 doGet() .doPost()方法.默认为get ...

  9. POJ3273：Monthly Expense(二分)

    Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...

  10. Resizable 2th click not working

    here's a simple solution.  just destroy the resizable function, then rebuild it. try { $("#div& ...