本篇文章给大家谈谈无线充电鼠标怎么充电?，以及淘宝鼠标经过图片放大的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
文章详情介绍：
鼠标玩转无线充电是何体验？雷柏MT750 PRO开箱
雷柏MT750 PRO是一款主打商务办公的多模无线鼠标，延续了之前的MT750S的无线多模等特性，并加入了Qi标准的无线充电功能，鼠标加入无线充电功能是和体验，下面图赏就带大家一睹为快。
在配件方面除了2.4G无线接收器外，还附赠了一条Micro USB充电线，也就是说雷柏MT750 PRO也同时具备有线充电能力，在充电时可当作有线鼠标使用。
外观上看雷柏MT750 PRO依然与MT750S采用了相同的设计，人体工程学造型设计配合大面积类肤材质，避免沾染指纹及手部油脂的同时也保证了长时间办公使用的舒适性。
作为一款主打办公的鼠标，也配备了较多的自定义按键以提升效率，两枚侧键调整到了左键处，用不同的材质区分。
侧裙部分配备了大尺寸的侧翼为拇指提供承托，对于握持感有一定提升，侧裙表面覆盖了软橡胶材质并辅以菱状纹理进行防滑。同时侧裙处提供了一个侧边滚轮，在长时间浏览网页或表格时更加方便。
鼠标底部覆盖了两大两小共四块特氟龙脚垫，并配有独立电源开关，内置了320mAh锂电池，相较于MT750S略有缩小，笔者猜测应该是为了内部无线充电模组腾开空间。
淘宝无线充电方面，雷柏MT750 PRO支持Qi标准无线充电，Qi是目前无线充电技术的通用标准，这也就意味着雷柏MT750 PRO在兼容性上会相当不错，只要是支持Qi标准的无线充电器都可使用。同时雷柏也推出了XC100无线充电器进行搭配。
XC100无线充电器体积十分小巧轻薄，同时最高功率可达10W，除了给鼠标充电外，支持无线充电的手机、耳机等设备也都能使用。
XC100无线充电器体积十分小巧轻薄，同时最高功率可达10W，除了给鼠标充电外，支持无线充电的手机、耳机等设备也都能使用。
雷柏MT750 PRO在续航方面已经达到了25天，几乎不会有续航焦虑，配合无线充电器，只需不使用时轻轻一放，即可满血复活。
前面说过雷柏这款XC100无线充电器峰值功率可达10W，除了鼠标外，支持无线充电的手机、耳机等设备也都能兼容。并且经过笔者实测，对iPhone Xs进行充电时，实际功率已经超过10W，对于这样一款小巧的无线充电器来说还是比较让人惊喜的。
用JavaScript实现电商图片放大镜效果(附代码)
当我们浏览淘宝或者京东网站的时候，当你用鼠标移动到产品详细页上面的图片时，图片上会显示小的方框，在图片的右边则显示出更大的图片方便浏览者可以看到更详细的产品细节。本文章我们就模拟下淘宝、京东产品放大镜效果。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东放大镜</title>
<style>
.box {
width: 450px;
height: 450px;
border: 1px solid #ccc;
float: left; /*设置浮动使得两个盒子在一排显示*/
position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
margin: 10px;
}
.big {
width: 600px;
height: 600px;
overflow: hidden;/*超出部分隐藏*/
border: 1px solid #ccc;
position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
display: none;/*默认不显示 鼠标经过box时显示*/
}
.mask {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;/*在box类里面定位 层级高于展示图*/
top: 0px;
left: 0px;
opacity: .5;/*设置遮罩层的透明度*/
cursor: move;/*鼠标经过的时候变成十字拖动样式*/
display: none;/*默认不显示 鼠标经过box时显示*/
}
.img {
position: absolute;/*在big盒子里面绝对定位*/
/*JavaScript需要赋值需要设置top和left值*/
top: 0px;
left: 0px;
}
#smallpic{
width: 450px;
height: 450px;
}
</style>
</head>
<body>
<div class="box">
<img id='smallpic' src="small.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="big.jpeg" alt="" class="img">
</div>
<script>
var mask = document.querySelector('.mask');
var box = document.querySelector('.box');
var big = document.querySelector('.big');
var img = document.querySelector('.img');
box.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
box.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
box.addEventListener('mousemove', function (e) {
//得到的x和y是鼠标在盒子内的坐标 this指向box
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
//设置最大移动距离
var maskWidth = box.offsetWidth - mask.offsetWidth;
var maskHeight = box.offsetHeight - mask.offsetHeight;
//控制mask移动的范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskWidth) {
maskX = maskWidth;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskHeight) {
maskY = maskHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//大图最大移动距离
var imgWidth = img.offsetWidth - big.offsetWidth;
var imgHeight = img.offsetHeight - big.offsetHeight;
//大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离
var bigX = maskX * imgWidth / maskWidth;
var bigY = maskY * imgHeight / maskHeight;
//赋值
img.style.left = (-bigX) + 'px';
img.style.top = (-bigY) + 'px';
});
</script>
</body>
</html>
效果图