<%@ 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. ZedGraph控件生成饼图、拆线图和柱状图例程

    这几天做了个自己觉得还蛮NB的功能,在GRID中选中一块数据,然后右键菜单即可生成三种图形,还可以互相切换,对了,饼图还添加了鼠标点击分离的处理,大致如图: 用的控件就是ZedGraph,我把它继承封 ...

  2. 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  3. 转：视觉中国的NoSQL之路：从MySQL到MongoDB

    起因 视觉中国网站(www.chinavisual.com)是国内最大的创意人群的专业网站.2009年以前,同很多公司一样,我们的CMS和社区产品都构建于PHP+Nginx+MySQL之上:MySQL ...

  4. js脚本同步、异步与延迟

    一般,我们通过src引入js文件时建议在页面末尾引入,因为会阻塞页面的渲染.defer和async可以达到同样效果 当HTML解析器遇到<script>元素时,它必须先执行脚本,然后再恢复 ...

  5. 金洪林：红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网

    金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网 金洪林:红邦创衣止于至善

  6. Linux 上使用 Gmail SMTP 服务器发送邮件通知

    导读 假定你想配置一个 Linux 应用,用于从你的服务器或桌面客户端发送邮件信息.邮件信息可能是邮件简报.状态更新(如 Cachet).监控警报(如 Monit).磁盘时间(如 RAID mdadm ...

  7. config large memory

    C Configuring Large Memory Optimization This appendix provides information for configuring memory op ...

  8. UVALive 6198 A Terribly Grimm Problem

    题目大意是 给出L,H      10^10范围 为[L, H]这个连续的整数区间寻找一个序列. 序列的长度要跟[L, H]一样 然后序列中的数都是素数,并且互不相同 并且序列中第i个数 要求是L + ...

  9. PHP学习之［第03讲］PHP5.4 语法、常量、变量、数据类型详解

    1.<?php echo "Hello World"; ?> 2.//注释1,#注释2,/* 注释3 */ 3.系统常量: __FILE__默认常量,是指PHP程序文件 ...

  10. cocos2d-x 在mac下执行 demo

    搞了好久,最终成功了. 记录一下 前辈的文章. 依照这个弄的 .http://blog.csdn.net/taowenyin/article/details/11750127 前辈的这个文章是在win ...