以前写的商品放大镜demo

最新推荐文章于 2024-02-03 16:21:01 发布
最新推荐文章于 2024-02-03 16:21:01 发布
阅读量431 收藏
点赞数
分类专栏： 前端技术 文章标签： js 放大镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangongda/article/details/72661998
版权

效果预览：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1{
width:400px;
height:400px;
border:solid 1px blue;
position: relative;
left:0;top:0;
background: url(img/TB2KJgidB0kpuFjy1zdXXXuUVXa_!!1580757763.jpg_400x400.jpg)
no-repeat;
float: left;
cursor: crosshair;
}
#sk{width: 220px;height:200px;background:#EBEDEA;position: absolute;
left:0;top:0;
filter:alpha(opacity:30);/* ie*/
opacity:0.3;/*其他*/
display: none;}
#box3{
width:400px;
height:400px;
/* background: red;*/
position: relative;
left:0;top:0;

}
#box2{width: 440px;height:400px;float: left;border: 1px solid green;
margin-left:50px;overflow: hidden;position: relative;display: none;
}
#tp{position: absolute;left:0 top:0;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
var sk=document.getElementById("sk");
// alert(sk.style.left); 
box3.οnmοusemοve=function(e){
var dx=window.event||e;
var mousele=dx.offsetX||dx.layerX;
var mouseto=dx.offsetY||dx.layerY;
var skleft=mousele-110;
var sktop=mouseto-100;
sk.style.display='block';
box2.style.display='block';
if(skleft>180){skleft=180} ;
if(skleft<0){skleft=0} ;
if(sktop<0){sktop=0};
if(sktop>200){sktop=200};
sk.style.left=skleft+'px';
sk.style.top=sktop+'px';
// alert(sk.style.left);
tp.style.left=-2*skleft+'px';
tp.style.top=-2*sktop+'px';
}
box3.οnmοuseοut=function(){
sk.style.display='none';
box2.style.display='none';
}
}
</script>
</head>


<body>
<div id="box1">
<div id="sk"></div>
<div id="box3"></div>
</div>
<div id="box2">
<img id="tp" src="img/TB239oudwJlpuFjSspjXXcT.pXa_!!1580757763.jpg"/>
</div>
</body>
</html>

莱恩-哈特
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt放大镜例子
08-23
先实现截取整个屏幕成pixmap，然后获得鼠标位置坐标，截取pixmap中鼠标位置的40x40的像素，然后放大3倍，截取的区域设置成画刷，在鼠标位置处120x120矩形中画出一个椭圆，其实就是一个圆。
Qt放大镜代码设计
10-09
基于Qt5开发的放大镜设计，用纯代码实现，非常有意思。实现思路：先实现截取整个屏幕成pixmap，然后获得鼠标位置坐标，截取pixmap中鼠标位置的40x40的像素，然后放大3倍，截取的区域设置成画刷，在鼠标位置处120x120矩形中画出一个椭圆，其实就是一个圆。这样就ok了，点击左键退出应用。
屏幕放大镜demo（模仿截图的局部放大）
07-13
这是一个简单的屏幕放大镜的DEMO ，是模仿截图时的局部方法开发的。
Qt放大镜（二）
zhaominyong的专栏
01-24 830
来自Qt本身的样例文档。 演示如何操作QPainterPath中的元素。 我们定义一个透镜形状的矢量变形场，并将其应用于路径上的所有点。这意味着在屏幕上呈现的不是像素操作，而是符号本身的修改矢量表示。从变形字形的高质量的反锯齿边缘可以看出这一点。 为了获得一个相当复杂的路径，我们允许用户输入文本并将文本转换为路径。这是使用QPainterPath::addText()函数完成的。 镜头是通过调用QPainter::drawEllipse()绘制的，使用QRadialGradient填充一个.
Qt 放大镜源代码
03-26
Qt 放大镜源代码
jq仿京东商品详细页图片放大镜.zip
07-11
在IT行业中，网页交互效果是提升用户体验的关键因素之一，而图片放大镜功能是电商网站商品详情页中常见的设计。这个"jq仿京东商品详细页图片放大镜.zip"压缩包文件包含了一个利用jQuery库实现的类似京东商城商品...
cloud-zoom 实现图片放大镜demo
03-23
"cloud-zoom" 是一个专门用于实现图片放大镜效果的JavaScript插件，它能够让用户在鼠标悬停在商品图片上时，看到一个放大版的细节视图，从而模拟出实体店中顾客用放大镜查看商品的体验。这种功能常见于淘宝等大型...
js放大镜（适用于商品详情）
10-22
在电商网站上，商品详情页面通常会包含一个放大镜功能，以便用户在不离开页面的情况下查看商品的细节。本文将详细介绍如何使用JavaScript实现一个适用于商品详情的放大镜功能，以及涉及的相关技术点。 首先，我们...
原生js实现商品放大镜效果
11-27
【商品放大镜效果实现原理】 商品放大镜效果是电商网站中常见的一种交互设计，它能够为用户提供更加细致的商品展示，增强用户体验。这种效果通常通过JavaScript实现，利用原生JS可以更好地控制性能和兼容性。主要...
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
Qt仿QQ截图最新版本，放大镜、坐标、颜色复制、画图形、文字、箭头、马赛克、序号都有，支持颜色面板，支持拖动和修改，支持撤销、钉住、屏幕录制
qq_36145663的博客
12-15 585
Qt仿QQ截图最新版本，放大镜、坐标、颜色复制、画图形、文字、箭头、马赛克、序号都有，支持颜色面板，支持拖动和修改，支持撤销、钉住、屏幕录制
仿淘宝放大镜功能(js+vue两种方法)
WeiflR10的博客
04-10 799
原生js写法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padd...
Qt实现屏幕取色器 (放大镜，RGB显示，智能调节）原理
zhaominyong的专栏
01-20 1139
运行效果： 原理： 首先给整个屏幕覆盖上一层高透明度的无边框窗口(这里我用的颜色为（255，255，255），且透明度为1 (【0,255】）) 通过定时器或线程实时更新鼠标位置，注意不要使用鼠标移动事件，如果通过鼠标移动来触发取色无法对动态视频取色 通过截图函数，对整个窗口进行截图，其中选择以鼠标为中心的一块矩形，我选取的大小是10*7，而放大镜是100*70，故放大倍数为10，将这部分矩形图形放在放大镜中，且选取鼠标所在位置的像素颜色。 ...
qt 界面放大控件随之放大_初探iOS 14的放大镜功能：用户界面优化 新增Multi-Shot功能...
weixin_39610759的博客
11-03 120
来源：cnBeta.COM每次iOS系统的版本更迭，苹果在改进现有无障碍功能的同时也会不断引入新的功能。即将到来的iOS 14也不例外，苹果为那些存在视觉障碍的用户提供经过改善的放大镜功能。 左图为iOS 14放大镜界面 右侧为iOS 13放大镜界面用户界面更新iOS 14新版放大镜的特点是启用了全新的用户界面，对该工具的每个功能提供了清晰的布局，从而更容易控制各个选项。例如，调整亮度和对比度，添...
QT实现放大、模糊效果窗体
wyfwx的专栏
09-09 4403
<br />classCZoomWidget:publicQWidget{Q_OBJECTpublic:CZoomWidget(QWidget*parent=0);~CZoomWidget();QGraphicsBlurEffect*BlurEffect;private://Ui::imgtestClassui;QGraphicsView*m_pView;QParallelAnimationGroup*pAnimationGroup;privateslots:virtualvoidtimerEvent(QT
使用PyQt5实现类似qq截图的放大镜功能
kongfsszz的博客
11-19 2204
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
Qt中用halcon做出的放大镜效果
lidengfeng0ff的专栏
09-29 1130
本来想设计一个像QQ截图里面的放大镜一样的效果，网上搜索半天得到的资料都不尽人意，所以调整了方案在窗口中动态插入一个Qlabel控件，用这个控件来处理图像，代码中也结合了网上的资源处理步骤如下： 1、插入Qlabel控件，让控件置顶，位置根据父控件自动调整，大小不变； QLabel *showManger; showManger = new QLabel(ui.page_g...
QT实现的具有放大功能的小窗口
hulinhulin的专栏
11-19 3459
当小窗口在图片上方时，显示放大的局部图片，效果如下图所示： 源码下载地址：QT实现的具有放大图像功能的小窗口-互联网文档类资源-CSDN下载https://download.csdn.net/download/hulinhulin/44741073 注意：图片是按原图比例显示的，图片显示时已经位移或者缩放了，需要重新计算子图像位置。 1 下方图片的显示 在paintEvent中显示： QPixmap pixmap("c:/patch-src.png"); painter.drawPix.
QT 实现放大镜跟随鼠标效果
最新发布
shensheng100221的博客
02-03 835
QT实现放大镜跟随鼠标效果
写一个jni demo
07-08
当您在Java程序中需要调用C/C++代码时，可以使用Java Native Interface（JNI）来实现。下面是一个简单的JNI示例，演示了如何将Java方法与C函数相互调用： 1. 创建一个Java类，例如"JNIDemo.java"，其中包含您想要调用的本地方法： ```java public class JNIDemo { // 本地方法声明 public native void sayHello(); // 加载本地库 static { System.loadLibrary("jni_demo"); // 加载名为"jni_demo"的本地库 } // 测试 public static void main(String[] args) { JNIDemo demo = new JNIDemo(); demo.sayHello(); // 调用本地方法 } } ``` 2. 在命令行中使用`javac`编译Java类：`javac JNIDemo.java`。 3. 生成C头文件，可以使用`javah`工具：`javah JNIDemo`。这将生成名为"JNIDemo.h"的头文件。 4. 创建一个C源文件，例如"jni_demo.c"，实现您在Java中声明的本地方法： ```c #include <stdio.h> #include "JNIDemo.h" JNIEXPORT void JNICALL Java_JNIDemo_sayHello(JNIEnv *env, jobject obj) { printf("Hello from C!\n"); } ``` 5. 在命令行中使用C编译器编译C源文件，并生成共享库文件（DLL或SO）： - 对于Windows（使用MinGW）：`gcc -shared -I"%JAVA_HOME%\include" -I"%JAVA_HOME%\include\win32" jni_demo.c -o jni_demo.dll` - 对于Linux/Mac：`gcc -shared -I"$JAVA_HOME/include" -I"$JAVA_HOME/include/linux" jni_demo.c -o libjni_demo.so` 注意：请将`$JAVA_HOME`替换为您Java安装的实际路径。 6. 运行Java程序：`java JNIDemo`。您将看到输出："Hello from C!"。 这是一个简单的JNI示例，演示了如何在Java和C之间进行方法调用。您可以根据自己的需求扩展和定制此示例。希望对您有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值