jQuery 放大镜效果_jquery放大效果-程序员宅基地
技术标签： DOM和jQuery jquery
效果图：
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
/** {*/
/* margin: 0px;*/
/* padding: 0px;*/
/*}*/
#smallBox{
position: relative;
width: 400px;
height: 400px;
/*border: 1px solid #ccc;*/
}
#smallBox img{
width: 400px;
height: 400px;
}
#bigBox {
overflow: hidden;
position: absolute;
width: 400px;
height: 400px;
display: none;
}
#bigBox img{
width: 800px;
height: 800px;
}
#zoom {
display: none;
position: absolute;
top: 0;
left: 0;
width:200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.1);
cursor: move;
}
</style>
</head>
<body>
<h1>放大镜</h1>
<hr>
<!--小图是400*400-->
<div id="smallBox">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
<div id="zoom"></div>
</div>
<!--小图是800*800-->
<div id="bigBox">
<img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 鼠标悬停在小图上
$("#smallBox").mouseenter(function () {
// 计算小图位置
var smallLeft = $("#smallBox").offset().left;
var smallTop = $("#smallBox").offset().top;
// 显示大图 并改变位置
$("#bigBox").show().offset({
left: smallLeft + 400 + 10,
top: smallTop
});
// 显示放大镜元素（蓝色小框）
$("#zoom").show();
// 绑定 鼠标移动事件
$(this).mousemove(function (event) {
// 鼠标在小图上的位置
var mLeft = event.pageX - smallLeft;
var mTop = event.pageY - smallTop;
// 计算放大镜位置 鼠标在中心，算一下距离，范围在0-200之间
var zLeft = Math.min(Math.max(mLeft - 100, 0), 200);
var zTop = Math.min(Math.max(mTop - 100, 0), 200);
console.log(mLeft,mTop)
// 放大镜（蓝色小框） 显示并跟随鼠标移动
$("#zoom").css("left", zLeft+"px").css("top", zTop+"px");
// 控制大图 显示部分内容 大图宽高是小图二倍，所以乘上二
$("#bigBox").scrollLeft(zLeft * 2).scrollTop(zTop * 2);
})
}).mouseleave(function () {
// 放大镜元素（蓝色小框） 隐藏
$("#zoom").hide();
// 大图隐藏
$("#bigBox").hide();
})
});
</script>
</body>
</html>
智能推荐
win10找不到打印机_Win10系统如何连接和找寻打印机？-程序员宅基地
文章浏览阅读4.8k次。很多朋友改完win10系统就找不到打印机设备，无法设置默认打印机，今天来解析这个问题！01进入设置界面通常，对于已经启动了并连接到了网络的打印机，会很容易被系统识别到，只不过需要确保打印机和电脑是连接的同一个网络。点击开始菜单，进入设置界面。选择设备。02添加打印机和扫描仪选择打印机和扫描仪，点击添加打印机或扫描仪。系统将会自动搜索识别，并将搜索到的设备罗列出来。接着，找到并点击您想要添加的打印机..._w10打印机在哪里找
【存储缓存】bcache原理及实践-程序员宅基地
文章浏览阅读9.1k次，点赞5次，收藏29次。bcache是linux内核块设备层的cache。主要是使用SSD盘在IO速度较慢的HDD盘上面做一层缓存，从而来提高HDD盘的IO速率。一个缓存设备(SSD)可以同时为多个后端设备(HDD)提供缓存。既然是缓存，那自然就会想到缓存策略，bcache支持三种缓存策略....................._bcache
linux amixer原理,amixer和alsamixer使用说明-程序员宅基地
文章浏览阅读658次。amixer和alsamixer使用说明amixer和alsamixer使用说明amixer和alsamixer说明本文主要解答：1. amixer与alsamixer的区别2. amixer与alsamixer的使用alsamixer与amixer的区别alsamixer是Linux音频框架ALSA工具之一，用于配置音频各个参数;alsamixer是基于文本图形界面的，可以在终端中显示.通过键盘..._amixer
web搭建，dns服务器搭建_dns和web服务器搭建-程序员宅基地
文章浏览阅读2.2k次，点赞3次，收藏15次。安装Web服务1、www(万维网服务)，主要应用于搭建web站点2、中间件，是用承载我们的Web站点，那么什么是中间件（如，iis、apache、nginx、tomcat、jboss等）,Web网站没有中间件是不能运行。3、如何安装windows IIS服务器管理器–角色–添加–web服务器–4、web站点的访问方式有三种（1）通过ip访问，一般是有多个公网地址，可以每一个站点分配一个ip（这种情况用的极少）原因：Ip很难记，公网地址需要收费（2）多端口访问，web站点默认是80端口，80_dns和web服务器搭建
Java时间处理工具类TimeUtils_java 时间工具类-程序员宅基地
文章浏览阅读2.5k次，点赞2次，收藏5次。以上方法笔者觉得没有必要再封装进工具类了，直接调用就行而其他的处理可以参考笔者的时间处理工具类 TimeUtils 的以下方法时间格式转化：转化成时间戳：转化成 LocalDateTimeformat()：转化成格式化日期字符串时间获取：获取当前时间戳（精确到毫秒）：获取当前的年（仅数值）：获取当前的月（仅数值）：获取当前的日（仅数值）：获取当前的年（格式为 yyyy 的字符串）：获取当前的年月（格式为 yyyy-MM 的字符串）_java 时间工具类
WINDOWS2008R2 2012 2016 服务器系统更新补丁打补丁 循环启动 无法进系统恢复解决办法_win2008r2无法进入系统-程序员宅基地
文章浏览阅读3.5k次。可以用如下方法进行急救: 1.PE或者windows光盘启动服务器（记得启动过程中手动加载阵列卡，如果是虚拟化里机器则不用，虚拟化里的课把pe做成iso加载，来启动虚拟化里的机器，我这的是vsphere6.7环境，四台物理服务器做的集群，使用的VSAN）.数据库在使用过程中，如遇到突然断电的情况，数据库损坏的机率很大，建议客户实时备份数据。如果确认补丁有问题，在安装了补丁后，系统还未进行重启，可在线进行挂起补丁的移除，然后重启。1.请务必做好备份，备份了数据库，在操作，保证数据绝对安全。_win2008r2无法进入系统
随便推点
Linux V4L2子系统分析（一）_v4l2_subdev_call-程序员宅基地
文章浏览阅读4.2k次，点赞12次，收藏72次。1.概述Linux系统上的Video设备多种多样，如通过Camera Host控制器接口连接的摄像头，通过USB总线连接的摄像头等。为了兼容更多的硬件，Linux内核抽象了V4L2（Video for Linux Two）子系统。V4L2子系统是Linux内核中关于Video（视频）设备的API接口，是V4L（Video for Linux）子系统的升级版本。V4L2子系统向上为虚拟文件系统提供了统一的接口，应用程序可通过虚拟文件系统访问Video设备。V4L2子系统向下给Video设备提供接口，同时管理_v4l2_subdev_call
服务器基础配置：浪潮服务器配置ILO地址、修改管理员密码、查看虚拟化是否打开：_浪潮服务器修改管理口密码-程序员宅基地
文章浏览阅读1w次。使用场景：因为在公司机房中的服务器我们在使用需要对他做一些类似于初始化的配置，分别是三个，——》第一个是配置服务器的ILO地址，这个是我们通过网络打开一个Web页面对服务器进行一些操作；——》第二个是对管理用户的密码进行修改，这个是因为不同的服务器初始的管理员的密码也许是不一样的，我们将其修改为统一的方便记忆也方便管理；——》第三个就是开启服务器的半虚拟化功能，这个是我们的公司的也许需要服..._浪潮服务器修改管理口密码
php如果字符串有1 3 5,PHP常用字符串函数小结-程序员宅基地
文章浏览阅读87次。PHP常用字符串函数小结来源：程序员人生 发布时间：2015-01-22 09:02:32 阅读次数：1594次1、判断类型的函数is_bool() //判断是不是为布尔型is_float() //判断是不是为浮点型is_real() //同上is_int() //判断是不是为整型is_integer() //同上is_string() ..._php 字符串1-5位
matlab从flove,Matlab玩出新高度，变身表白女友神器_善良995的博客-程序员宅基地-程序员宅基地
文章浏览阅读431次。原文作者：善良995原文标题：Matlab玩出新高度，变身表白女友神器发布时间：2021-03-19 13:36:02Matlab还可以这样玩儿？每逢节日愁哭程序员，不知道该送什么给女朋友，在这里教你用Matlab玩儿出属于程序员的浪漫，送给她一整天的惊喜^^一、效果图先来看看效果图：怎么样，这礼物是不是很用心？是不是很特别？是不是很程序猿？(斜眼笑~)二、完整模板代码当然，我怎么忍心让好男孩们千..._clc clear [x,y,z] = meshgrid(linspace(-3,3,101)); f = -x.^2.*z.^3-(9/80)
字符数组和字符串指针在内存中存储_使用字符串指针定义的变量储存在内存中的-程序员宅基地
文章浏览阅读5.5k次，点赞2次，收藏4次。#include#includechar* strcpy1(){ char *p = "hello kitty"; printf("%s\n", p); return p;}int main(){ printf("%s", strcpy1()); return 0;}字符串在内存中存储在只读数据段，当定义一个字符串指针时，该指针指向这个只读区域，即使在函数中将这个指针返回_使用字符串指针定义的变量储存在内存中的
ubuntu18.04下mysql必须要sudo权限才能打开_在ubuntu中mysql登录时为什么要加sudo-程序员宅基地
文章浏览阅读4.1k次，点赞5次，收藏21次。问题：ubuntu18.04下mysql必须要sudo权限才能打开解决办法：通常是 因为，用户的密码加密方式 不正确导致的。1、sudo mysql -u root -p2、use mysql；3、update user set plugin = 'mysql_native_password';4、flush privileges;5、mysql -u root -p，输入密码登录成功..._在ubuntu中mysql登录时为什么要加sudo