精华内容
下载资源
问答
  • 2021-04-01 18:05:06

    html 鼠标移入图片上显示文本div
    首先html 格式
    html 样式:

    车位展示

    高效·快捷·质量

    css样式 .box1>img{ width: 470px; height: 300px; overflow: hidden; } .box1{ width: 500px; height: 300px; overflow: hidden; } .text { width: 400px; height: 200px; background: rgba(0,0,0,.1); border: 1px solid #FFFFFF; padding: 10px; color:#fff; font-size: 20px; position: relative; margin-top:0px; /*text默认处于aa盒子下面,所以不可见*/ transition: .5s} /*transition为过渡动画效果,时间0.5秒*/ .text>p{ padding-top: 30px; text-align: center; } .box1:hover .text { margin-top: -280px; margin-left: 30px; }

    (https://img-blog.csdnimg.cn/20210402084522968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDYwMjE0,size_16,color_FFFFFF,t_70#pic_center)

    更多相关内容
  • 同一幅图片鼠标经过不同区域 出现不同提示框文字 可以自己编辑修改 用于网页制作 特效 提示不错值得借鉴
  • VC在指定区域限制鼠标显示样式,在图中的图片位置,鼠标放上后的样式与其它区域不同的,程序中还配制有一个Hot Botton按钮,自己测试吧。
  • 鼠标放到比如肇庆市上面(背景黄色)显示的背景颜色就是白色。 我想请问下 如何放到不同的背景颜色上(蓝、黄、红) 显示的背景颜色也是三种(任意三种颜色)。 还有点击左下角三个按钮 相对应颜色的地方能高亮...
  • 导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和transform: ...

    导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和transform: translate3d转换、transition过渡效果。

    当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:

    html语句:

    鼠标移入后显示的文字

    css语句:

    .yiru1{width: 600px;height: 100%;position:relative; overflow: hidden;}

    .yiru2{position: absolute;width: 100%;height: 100%;bottom: -100%;transition:transform 1.5s; box-sizing: border-box;padding: 30px;}

    .yiru1:hover .yiru2{transform: translateY(-100%);background-color:#000 ; opacity: 0.7;padding: 30px;}

    是不是很简单,这里是把图片设置成了背景,记住一定要给背景图片所在div设置一个高度(这里我之所以把高度设置在了内嵌样式中,是为了在别处使用此效果时,高度不一样的话,可以手动调整,不用动样式表了),超出高度部分隐藏显示,我还给.yiru1设置了一个宽度600,其实在正常的网页中,应该是已经有了外层的宽度,所以正常应用中根据情况看是否需要设置宽度。然后设置其相对定位。这部分是最开始显示的样子。

    63f3c235214cab6d0d853d5b0ef7ad61.png

    之后要替换它的文字/图片层设置为绝对定位,这里我用文字层做一下讲解。

    宽高都要设为100%,这样才能完全覆盖掉背景图片,然后bottom: -100%;就是要把文字最开始的时候放在背景图片的下面,我们可以看到其实文字层是在背景图层里面的,但是因为设置了高度和超出隐藏,所以文字层其实是被隐藏了。文字层的位置其实是在这里的:

    76201caf217785ed8438a1c5d4fbec0f.png

    然后鼠标移到背景层的位置时,只要让文字往上移动100%的高度就可以了,也就是transform: translateY(-100%);它和transition:transform 1.5s;是搭配使用的,意思是往y轴的上方移动100%的高度,移动的过渡时间为1.5s。关于这个样式的具体用法,大家可以自行搜索。

    这里为了让文字能显示的清楚,又给文字层加了一层透明度为0.7的黑色背景,然后让文字的内边距为30px,这样显示出来就很好看了。

    f493b072c13d93f178f174b6e509301f.png

    怎么样?觉得用css3实现鼠标移入后显示文字/图片的效果是不是特别简单,完全没有用到jQuery的效果。

    展开全文
  • 鼠标悬停显示图片

    千次阅读 2020-02-25 09:51:33
    在 web 端我们查看一些数据时,为了方便用户理解数据的计算方法,会在鼠标...除了上面说的那种静态信息外,在润乾报表中也可以实现鼠标指向显示对应的动态数据,还可以实现鼠标指向显示图片的效果哦! 这里以学生信...

    在 web 端我们查看一些数据时,为了方便用户理解数据的计算方法,会在鼠标指向格子的时候出现一些提示,鼠标移开的时候提示就不显示了,再比如说,鼠标指向页面按钮,出现按钮功能的提示,这样的效果在润乾中可以轻松实现,也有相应的文档介绍 鼠标悬停出现提示信息怎么做

    除了上面说的那种静态信息外,在润乾报表中也可以实现鼠标指向显示对应的动态数据,还可以实现鼠标指向显示图片的效果哦!

    这里以学生信息表为例,实现鼠标指向不同人员的照片,可以在旁边显示出相应的大图。

    具体实现方法

    制作一张学生信息表

    数据库中存的人员基本信息是在一条记录里,而我们常见的人员信息表是将一条记录里的数据在不同行中显示,这种报表相对于网格式报表来说格式更加随意,我们称之为自由报表,关于如何实现自由格式报表可以参考
    数据库中的图片字段怎么在报表中呈现 (图片字段呈现)

    报表模板设计如下图所示

    增加要显示的图片的图层

    在报表中追加一列,将 J2~J6 合并单元格,并将合并后的 J2 单元格数据类型设置为 html, 单元格的内容为:

    ="<div id='sjbb_hover'>
    
     <p>人员信息高清免冠证件照 </p>
    
     <img src='http://localhost:6868/demo/reportJsp/images/"+F3+".jpg' width=150px>
    
     </div>"
    

    页面中增加鼠标悬停时图层的样式

    在 showReport.jsp 中增加如下的样式:

    <style>
    #sjbb_hover{    padding: 10px 10px 10px 10px;
        border-radius: 3px;
        box-shadow: 0px 0px 2px #ccc;
        background: #fff;
        color: #000;
        position: absolute;
        text-align: center;
        display: inline-block;
        left: 532px;
        top: 47px;}
    </style>
    

    页面中增加图层的显示隐藏的 JS 方法

    $("#sjbb_hover").hide();
    function show()
    {
       $("#sjbb_hover").show();
    }
    function hide()
    {
        $("#sjbb_hover").hide();
    }
    

    在报表中给图片增加 html 事件

    选中 H2,设置 HTML 事件为 οnmοuseοver=‘show()’ οnmοuseοut=‘hide()’

    经过以上设置我们就完成了鼠标悬停显示图片的需求了。

    浏览器中通过http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= 学生信息表.rpx 就可以看到效果了。


    翻页查看另一人的信息时,鼠标指向是对应人员的照片。

    通过这样的设置,我们还可以实现鼠标指向,显示个二维码,用户可以通过手机扫码二维码,在手机上查看更多需要了解的信息。

    展开全文
  • 很简单实用的一个小程序。基于opencv,实现窗口显示图片鼠标单击截取图片区域
  • 利用vs2010MFC对话框的鼠标消息函数RBBUTTONDOWN,ONMOUSEMOVE,RBBUTONUP实现在picture control控件上选定图像的矩形ROI感兴趣区域,并裁剪显示出所选定的ROI区域。按住鼠标右键,拖动光标划定矩形区域,再弹起鼠标...
  • (1)当鼠标停留在图中三个不同的邮箱图标时,鼠标箭头均变为小手指,且在鼠标旁弹出一个框子(title属性),上面的文字与各自的邮箱名称对应? (2)应该不能用img标签实现,因为img标签的title对应的是整张图片,...
  • //判断鼠标是否是左键按下,且鼠标位置是否在绘画区域 if(mouse->button()==Qt::LeftButton &&ui->label->geometry().contains(mouse->pos())) { press=true; QApplication::setOverrideCursor(Qt::...

    如题:
    mainwindow.ui
    ui文件随便建立一个Qlabel控件就行
    在这里插入图片描述
    头文件
    mainwindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    #include <QWidget>
    #include <QtGui>
    #include <QLabel>
    #include <QPushButton>
    #include <QComboBox>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
        enum  Type {
            None          = 0,
            Amplification ,
            Shrink,
            Lift,
            Right,
            Up,
            Down,
            Move
        };
    
    private:
        Ui::MainWindow *ui;
        QPixmap  *pix;
            int action;          //动作(放大,缩小,移动...)
            int pixW;            //图片宽
            int pixH;            //图片高
    
            QRect Paint;         //绘画区域
            QLabel label;
    
            float ratio;                //比例
            QPoint offset;              //一次的图片偏移值
            QPoint Alloffset;           //总偏移
    
            void AddComboItem(QComboBox* cmbo);
            bool event(QEvent * event);
            void wheelEvent(QWheelEvent* e);     //鼠标滑轮事件
    private slots:
       void paintEvent(QPaintEvent *event);
    };
    
    #endif // MAINWINDOW_H
    
    

    源文件:
    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QLabel>
    #include <QPushButton>
    #include <QApplication>
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow),
        //Paint(10,10,810,810),
        Alloffset(0,0)
    {
        ui->setupUi(this);
        ratio= 1.0;             //初始化图片缩放比例
        action = MainWindow::None;
        pixW = 985;            //设置图片尺寸为985*740
        pixH = 740;
        pix = new QPixmap;
        pix->load("D:/tu/test2.jpg");
     //   ui->label;
    
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    bool MainWindow::event(QEvent * event)
    {
        static bool press=false;
        static QPoint PreDot;
    
        if(event->type() == QEvent::MouseButtonPress )
        {
               QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);
    
               //判断鼠标是否是左键按下,且鼠标位置是否在绘画区域
               if(mouse->button()==Qt::LeftButton &&ui->label->geometry().contains(mouse->pos()))
               {
                   press=true;
                   QApplication::setOverrideCursor(Qt::OpenHandCursor); //设置鼠标样式
    
                   PreDot = mouse->pos();
               }
    
        }
    else if(event->type() == QEvent::MouseButtonRelease)
    {
        QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);
    
        //判断鼠标是否是左键释放,且之前是在绘画区域
        if(mouse->button()==Qt::LeftButton && press )
        {
            QApplication::setOverrideCursor(Qt::ArrowCursor); //改回鼠标样式
            press=false;
        }
    }
    
     if(event->type() == QEvent::MouseMove)              //移动图片
     {
          if(press)
         {
            QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);
    
            offset.setX(mouse->x() - PreDot.x());
            offset.setY(mouse->y() - PreDot.y());
            PreDot = mouse->pos();
            action = MainWindow::Move;
            this->update();
         }
     }
    return QWidget::event(event);
    }
    
    void MainWindow::wheelEvent(QWheelEvent* event)     //鼠标滑轮事件
    {
     if (event->delta()>0) {      //上滑,缩小
    
        action=MainWindow::Shrink;
        this->update();
    
     } else {                    //下滑,放大
         action=MainWindow::Amplification;
         this->update();
     }
    
     event->accept();
    }
    
    
    
    void MainWindow::paintEvent(QPaintEvent *event)
    {
      QPainter painter(this);
      int NowW = ratio *pixW;
      int NowH = ratio *pixH;
    
    if(action==MainWindow::Amplification)           //缩小
    {
          ratio-=0.1*ratio;
        if(ratio<0.18)
          ratio = 0.1;
    
    
    }
    else  if(action==MainWindow::Shrink)           //放大
    {
    
         ratio+=0.1*ratio;
       if(ratio>4.5)
         ratio = 5.000;
    
    
    }
    if(action==MainWindow::Amplification || action==MainWindow::Shrink)      //更新图片
    {
      NowW = ratio *pixW;
      NowH = ratio *pixH;
      pix->load("D:/tu/test2.jpg");                 //重新装载,因为之前的图片已经被缩放过
      *pix = pix->scaled(NowW, NowH,Qt::KeepAspectRatio);
      action=MainWindow::None;
    
    }
    
    if(action==MainWindow::Move)                    //移动
    {
        int offsetx=Alloffset.x()+offset.x();
        Alloffset.setX(offsetx);
    
        int offsety=Alloffset.y()+offset.y();
        Alloffset.setY(offsety);
        action=MainWindow::None;
    }
    
    if(abs(Alloffset.x())>=(ui->label->width()/2 + NowW/2 -10))    //限制X偏移值
    {
        if(Alloffset.x()>0)
            Alloffset.setX(ui->label->width()/2 + NowW/2 -10);
        else
         Alloffset.setX(-ui->label->width()/2 + -NowW/2 +10);
    }
    if(abs(Alloffset.y())>=(ui->label->height()/2 + NowH/2 -10))    //限制Y偏移值
    {
        if(Alloffset.y()>0)
            Alloffset.setY(ui->label->height()/2 + NowH/2 -10);
        else
         Alloffset.setY(-ui->label->height()/2 + -NowH/2 +10);
    
    }
    
    int x = ui->label->width()/2 + Alloffset.x() -NowW/2;
    if(x<0)
        x=0;
    
    
    int y = ui->label->height()/2 + Alloffset.y() -NowH/2;
    if(y<0)
        y=0;
    
    int  sx = NowW/2 - ui->label->width()/2 - Alloffset.x();
    if(sx<0)
        sx=0;
    
    int  sy = NowH/2 - ui->label->height()/2 - Alloffset.y();
    if(sy<0)
        sy=0;
    
    
    int w =(NowW - sx)>ui->label->width()? ui->label->width() : (NowW - sx);
    if(w>(ui->label->width()-x))
        w = ui->label->width()-x;
    
    int h =(NowH - sy)>ui->label->height()? ui->label->height() : (NowH - sy);
    if(h>(ui->label->height()-y))
        h = ui->label->height()-y;
    
      painter.drawRect(ui->label->x()-1,ui->label->y()-1,ui->label->width()+1,ui->label->height()+1); //画框
      painter.drawTiledPixmap(x+ui->label->x(),y+ui->label->y(),w,h,*pix,sx,sy);             //绘画图形
    }
    
    

    效果:
    在这里插入图片描述
    在这里插入图片描述
    参考:https://www.cnblogs.com/lifexy/p/9057046.html
    会出现无法加载大图片问题,建议使用QImage打开,然后在转换为QPixmap

    展开全文
  • 如果需要我们选择的区域继续划分成不同区域,是不是能检测更多内容,比如那一块区域通过的人数最多。 先来回顾之前的代码 import cv2 import numpy as np img = cv2.imread('6.jpg') #加载本地的图像 img2 = ...
  • python中 鼠标点击获取图片像素点的坐标两种办法 区域像素处理
  • 我们在工作中总会遇到一些需要获取坐标的方式,来对图像进行处理填充色彩, ...结果显示无误,代码如下: import cv2 import numpy as np img = cv2.imread('6.jpg') #加载本地的图像 a = [] #用于存放横坐标...
  • C#与Halcon联合编程实现鼠标区域的选择 在视觉检测项目中,有时可能需要选择某一个已经提取出区域,查看其...由于当前项目中需要用到区域选择功能,所以对这个功能进行了开发验证,下面的实现的效果图,包括显示...
  • js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
  • //使图片缩放的效果看起来像是以鼠标所在点为中心进行缩放的 } } } void ImageWidget::setQGraphicsViewWH(int nwidth, int nheight)//将主界面的控件QGraphicsView的width和height传进本类中,并根据图像的长宽和...
  • 用PIL的Image打开我的图片:from PIL import Image img = Image.open('0.jpg') 用matplotlib给出一个plot对象:import matplotlib.pyplot as plt fig = plt.figure()然后用到的是matplotlib 的一个函数canvas.mpl_...
  • 2021-11-14 鼠标悬停显示隐藏内容

    千次阅读 2021-11-14 09:10:37
    鼠标悬停显示隐藏内容 <div class="app"><span>下载APP</span> <div class="dropdown-content"> </div> css代码 .app{ height: 30px; width: 104px; background-color...
  • Matlab 利用鼠标选择目标区域

    千次阅读 2020-12-02 20:50:56
    Matlab 利用鼠标选择目标区域 !总是遗忘一些知识,翻找以前的东西很麻烦,就当备忘录了! 使用imrect()函数 % ------------------ % Matlab手动鼠标截图,获取兴趣区域 % ------------------ clc; clear; close ...
  •   在OpenCV显示比窗口更大的图片,可通过右侧的垂直滚动条和底部的水平滚动条移动图片显示全图。 实现背景   在OpenCV中,虽然有cv2.getTrackbarPos() 函数,但其作用主要是用作动态调节参数的控件,更准确...
  • Opencv鼠标回调选取多个区域

    千次阅读 2022-03-20 11:14:31
    Opencv鼠标回调选取多个区域 背景 ​ 在图像处理中我们常常需要选取多个区域来进行处理,下面将介绍Opencv中两种多个区域选取的方法。 方法一: ​ 使用鼠标回调选取多个区域,主要使用的函数如下 void cv::...
  • 无标题文档 *{ margin:0; padding:0} .box{ height:260px; width:400px; position:relative} .mask{ position:absolute; height:100%; width:100%; top:0; left:0; background:#000; opacity:.3;....su
  • 用CSS控制,这是比较常用的方法:CSS代码: .i{ background-image: url("/images/icon.png"); background-position:-26px -79px; } DIV代码:效果:
  • 图片比要显示区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动。具体实现效果如下图,如果我们移动的是div 实现思路相仿。此处需要注意的...
  • css-实现鼠标移至图片显示遮罩层

    万次阅读 多人点赞 2018-05-09 20:36:37
    1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 &lt;div class="img_div"&gt; &lt;img src="./images/paella-dish.jpg"&gt; &lt;a href="#"&...
  • Vue中实现鼠标悬浮完成图片替换

    千次阅读 2019-03-01 11:39:05
    最近在做一个小项目,要实现的功能是在鼠标悬浮时,完成其图片更换。再三思索了好久,本来打算通过css来实现,貌似发现在vue中img标签的src更改好像没法通过css来实现,于是便转换了种方法,通过一些函数来实现。...
  • ![图片说明]...就是当我把鼠标移到左边的图片上以后,右边的div则显示图片的信息? (左边是一个轮播图,右边我想介绍每张图片的信息,但又不能让每张图的信息都同时显示在右边)
  • 鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效。 实现了 enen <!...
  • 1.首先选取一张图片 import numpy as np import cv2 img = cv2.imread('D:/OpencvVideo/1.jpg') # create a window cv2.namedWindow('image', flags= cv2.WINDOW_NORMAL | cv2.WINDOW_FREERATIO)# 定义窗口1 ...
  • opencv 鼠标选取图像感兴趣区域

    千次阅读 2017-04-10 19:39:39
    我们在做工程应用时,经常少不了鼠标的交互,这篇博客就是关于在图像上使用鼠标选取感兴趣区域

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,604
精华内容 29,841
关键字:

不同区域显示不同鼠标图片