车位展示
高效·快捷·质量
html 鼠标移入图片上显示文本div
首先html 格式
html 样式:
车位展示
高效·快捷·质量
(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)
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用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,其实在正常的网页中,应该是已经有了外层的宽度,所以正常应用中根据情况看是否需要设置宽度。然后设置其相对定位。这部分是最开始显示的样子。
之后要替换它的文字/图片层设置为绝对定位,这里我用文字层做一下讲解。
宽高都要设为100%,这样才能完全覆盖掉背景图片,然后bottom: -100%;就是要把文字最开始的时候放在背景图片的下面,我们可以看到其实文字层是在背景图层里面的,但是因为设置了高度和超出隐藏,所以文字层其实是被隐藏了。文字层的位置其实是在这里的:
然后鼠标移到背景层的位置时,只要让文字往上移动100%的高度就可以了,也就是transform: translateY(-100%);它和transition:transform 1.5s;是搭配使用的,意思是往y轴的上方移动100%的高度,移动的过渡时间为1.5s。关于这个样式的具体用法,大家可以自行搜索。
这里为了让文字能显示的清楚,又给文字层加了一层透明度为0.7的黑色背景,然后让文字的内边距为30px,这样显示出来就很好看了。
怎么样?觉得用css3实现鼠标移入后显示文字/图片的效果是不是特别简单,完全没有用到jQuery的效果。
在 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 就可以看到效果了。
翻页查看另一人的信息时,鼠标指向是对应人员的照片。
通过这样的设置,我们还可以实现鼠标指向,显示个二维码,用户可以通过手机扫码二维码,在手机上查看更多需要了解的信息。
如题:
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