<%@ 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. 从Profile中窥探Unity的内存管理

    刨根问底U3D---从Profile中窥探Unity的内存管理 这篇文章包含哪些内容 这篇文章从Unity的Profile组件入手,来探讨一下Unity在开发环境和正式环境中的内存使用发面的一些区别, ...

  2. Eclipse里的智能提示

    Eclipse 3.1里的智能提示功能对于写JAVA程序又不记得类名和函数的人来说是一个很好的助手工具,但是Eclipse里的智能提示的快捷键是Ctrl+Space,在中文Windows操作系统中它确 ...

  3. nterrupt 和 using 在C51中断中的使用

    8051系列MCU的基本结构包括:32个I/O口(4 组8bit 端口):两个16位定时计数器:全双工串行通信:6个中断源(2个外部中断.2个定时/计数器中断.1个串口输入/输出中断),两级中断优先级 ...

  4. gcc编译动态和静态链接库

    我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不会被连接到目标代码中,而是 ...

  5. Android 介绍spydroid每个包的大体功能

    看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...

  6. Excel进行项目规划的好处

    1.表格的方式 2.多个工作表 3.插入图片 4.清晰的规划 5.大众都能看得懂 6.辅助一些数据表设计,其他的流程设计 7.对项目该做什么,进度等等有一个明确的认识 8.项目管理,吃透需求,对进度把 ...

  7. -_-#【AngularJS】

    ele.me 是如何运行的 客户端JavaScript的5个弊端 [翻译]构建自己的AngularJS,第一部分:Scope和Digest 绑定window的不会自动移除?

  8. vim插件

    所需即所获:像 IDE 一样使用 vim https://github.com/yangyangwithgnu/use_vim_as_ide mark.vim http://www.vim.org/s ...

  9. 如何使用SecureCRT连接vmware下ubuntu

    配置SecureCrt 和 ubuntu1. 首先要明白什么是ssh?可以把ssh看做是telnet的加强版,telnet的密码和信息都是不加密的,而ssh则加密.2. 开启ubuntu上的ssh功能 ...

  10. DLL入门浅析(5)——使用DLL在进程间共享数据

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/21/90734.html 在Win16环境中,DLL的全局数据对每个载入它的进程来说都是相同的 ...