- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找悬停时不需要两个图像(大和小)工作的 jquery 或 javascript 图像放大镜。我已经搜索了几个小时,但没有找到任何按照他们所说的方式工作的。
都已尝试过,但出于某种原因无法使用我当前的配置。
所以此时我正在寻找非谷歌搜索结果,因为我已经浏览了“jquery Image Magnifier”的 25 页结果,但没有任何效果。
最佳答案
您可以在隐藏 Canvas 中渲染图像的副本,在鼠标位置周围抓取一个矩形并在第二个可见 Canvas 中渲染该部分的放大图。它是用很少几行代码编写的——即使是用普通的 Javascript:
var zoom = function(img){
var canS = document.createElement('canvas'),
can = document.createElement('canvas'),
ctxS = canS.getContext('2d'),
ctx = can.getContext('2d'),
id = ctx.createImageData(240,240),
de = document.documentElement;
can.className = 'zoom';
can.width = can.height = 240;
canS.width = img.width;
canS.height = img.height;
img.parentElement.insertBefore(can,img.nextSibling);
ctxS.drawImage(img,0,0);
img.onmousemove = function(e){
var idS=ctxS.getImageData(
e.clientX-e.target.offsetLeft+(window.pageXOffset||de.scrollLeft)-20,
e.clientY-e.target.offsetTop+(window.pageYOffset||de.scrollTop)-20,
40,40);
for (var y=0;y<240;y++)
for (var x=0;x<240;x++)
for (var i=0;i<4;i++)
id.data[(240*y+x)*4+i] = idS.data[(40*~~(y/6)+~~(x/6))*4+i];
ctx.putImageData(id,0,0);
}
}
例子: http://kirox.de/test/magnify.html
有一个指向改进版本的链接,该版本具有可调节的圆形镜头,具有灯光效果和桶形失真。也适用于 Canvas 。
限制:
关于javascript - jQuery Javascript 图像放大镜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6074588/
我用 JavaScript 构建了一个放大镜,当我单击它或单击并拖动它时,它效果很好,但它不应该从屏幕上隐藏。 $(".menu-left-preview-box-preview").bind('cl
我在网上搜索过放大镜,但通常它们只适用于一张照片。所以,我做了一个放大镜,可以放大特定 div 中的所有图片。它在 Chrome 浏览器上运行良好,但在 Firefox 和 Opera 浏览器上会产生
我正在 C#/WPF 应用程序中为 Kinect SDK 构建手势系统。我想添加放大镜放大和缩小的手势。我更愿意使用内置的 Windows 放大镜或其底层逻辑,但任何获得类似效果(多显示器感知)的方法
我正在寻找将鼠标悬停在 Fancybox 图像上时将光标更改为放大镜的解决方案。 就像在 Pinterest 上一样,当您将鼠标悬停在图片上时(使用 chrome)。 到目前为止我有这个没有跨浏览器支
$(document).ready(function(){ var native_width = 0; var native_height = 0; //Now the mousemove funct
我还没有在文档中找到解决这个问题的方法,我想在开始解决这个问题之前先在这里问一下。 最佳答案 您想添加一个 trigger到您的文本字段。 例如: {
我使用 windows 放大镜 api 在 autohotkey 中创建了一个以鼠标为中心的放大镜。在 Windows 7 中完成,在新的 Windows 8、8.1 甚至 10 LTSB 上工作。但
如何防止在 UITextField 中编辑文本并隐藏光标/插入符号/放大镜,但仍然显示键盘,因为我正在使用 inputView 使用 UIPickerView/UIDatePickerView? 将
我正在尝试制作 FastSelectEditText,以便: 可以通过长按和滑动手指来选择文本。 滑动和选择时,显示放大镜(如 iphone),以便用户可以看到手指下的文字。 不幸的是,我的设计存在问
我是一名优秀的程序员,十分优秀!