精华内容
下载资源
问答
  • 鼠标悬停显示图片

    千次阅读 2020-02-25 09:51:33
    会在鼠标指向格子的时候出现一些提示,鼠标移开的时候提示就不显示了,再比如说,鼠标指向页面按钮,出现按钮功能的提示,这样的效果在润乾中可以轻松实现,也有相应的文档介绍 鼠标悬停出现提示信息怎么做 。...

    在 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 就可以看到效果了。


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

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

    展开全文
  • jquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细...
  • 里来给大家推荐一个纯CSS实现鼠标悬停显示图片效果的实例分享,以针对鼠标移到tr标签上来添加hover这种最简单的方式来演示,简单明了,需要的朋友可以参考下
  • 在报表工具中实现鼠标悬停显示图片的需求,也只需要在报表里增加一个图层的定义,在对应的格子上挂上 html 事件,通过 JS 的 show()hide() 就可以轻松实现,显示的图片也可以根据指向的对象不同,动态显示出不同的...

    其实现在大多报表工具都支持格子中写 html。在报表工具中实现鼠标悬停显示图片的需求,也只需要在报表里增加一个图层的定义,在对应的格子上挂上 html 事件,通过 JS 的 show()hide() 就可以轻松实现,显示的图片也可以根据指向的对象不同,动态显示出不同的图片信息,而且不会影响原有数据呈现的布局,具体实现可以参考下这篇文章的例 鼠标悬停显示图片 。

    展开全文
  • 鼠标悬停显示图片代码, 很简单,也很好理解,有点像淘宝的那种效果!
  • rp原型中鼠标悬停显示图片There are tons of options available for UX designers to prototype a user experience and you may not know what are the pros and cons of each tool just yet. The main goal of this...

    rp原型中鼠标悬停显示图片

    There are tons of options available for UX designers to prototype a user experience and you may not know what are the pros and cons of each tool just yet. The main goal of this post is to give you a taste of each tool’s prototyping workflow by taking you through the process of building a simple hover state example. By the end of these exercises, you should have a high-level idea of the jobs that are suitable for each of the tools.

    Ť这里可供UX设计师为原型用户体验选项吨,你可能不知道什么是每个工具的利弊,只是还没有。 这篇文章的主要目的是通过引导您完成一个简单的悬停状态示例的过程,使您领略每种工具的原型工作流程。 在这些练习结束之前,您应该对适用于每种工具的工作有一个较高的了解。

    我们在建什么? (What are we building?)

    Since the goal is to get a quick understanding of the prototyping tool’s workflow, we don’t need to be too fancy. A simple button hover prototype that alters the button background color should do the job. Below are the two component states we will be animating between.

    由于目标是快速了解原型工具的工作流程,因此我们不必太花哨。 一个简单的按钮悬停原型可以改变按钮的背景颜色。 以下是我们将在其中进行动画处理的两个组件状态。

    Image for post
    The two states we’ll be prototyping
    我们将要原型化的两个状态

    Here is a quick spec of the button background style:

    以下是按钮背景样式的快速说明:

    • Default background color: #3B42F4

      默认背景色:#3B42F4
    • Hover background color: #767BF8 (or 70% opacity of the default)

      悬停背景颜色:#767BF8(或默认值的70%不透明度)

    视力 (Invision)

    Instead of Invision Studio, we’ll do an Invision web example because it is the most popular prototyping tool based on 2018 Design Tools Survey. Since this is a screen linking tool, the only way to prototype the hover state is to build a hover link hotspot.

    我们将代替Invision Studio,而是做一个Invision Web示例,因为它是基于2018 Design Tools Survey的最受欢迎的原型工具。 由于这是一个屏幕链接工具,因此原型化悬停状态的唯一方法是构建悬停链接热点。

    Step 1: Start by setting up two screens with each of the button states. You will need to design the buttons in another design tool of your choosing then upload the two states to Invision.

    步骤1:首先使用每个按钮状态设置两个屏幕。 您将需要在您选择的另一个设计工具中设计按钮,然后将这两种状态上载到Invision。

    Image for post

    Step 2: Setup a hotspot over the default button with ‘Screen as Overlay’ link to the hover screen. Make sure to un-check the ‘Stay on target screen’ to allow the hover out.

    第2步:在默认按钮上设置一个热点,并使用“ Screen as Overlay”链接到悬停屏幕。 确保取消选中“停留在目标屏幕上”以允许鼠标悬停。

    Image for post

    Result: You should now have a functioning button hover state.

    结果:您现在应该具有正常的按钮悬停状态。

    Image for post

    优点: (Pros:)

    Invision is fairly straightforward and that’s its advantage. You can essentially prototype hover states between any two static screens. Updating design is as easy as uploading a new mockup.

    Invision非常简单,这就是它的优势。 实际上,您可以在任何两个静态屏幕之间原型化悬停状态。 更新设计就像上传新模型一样容易。

    缺点: (Cons:)

    The transition animation is limited and lacking sequence. Therefore if you require elements to transition one after another with fancier effects then this may not be the right tool of choice.

    过渡动画是有限的,缺少序列。 因此,如果您需要元素以更高的效果一个接一个地过渡,那么这可能不是正确的选择。

    成帧器X (Framer X)

    Framer has come a long way from being viewed as a super-advanced prototyping with code tool to now a design tool with prototyping capabilities. There are a couple of ways you can prototype a hover state in Framer X. We are going to go over the code override method because that's more unique to Framer and it’s not too complex.

    从被视为具有代码工具的超高级原型到如今具有原型功能的设计工具,Framer已有了很长的路要走。 您可以通过两种方法在Framer X中为悬停状态建立原型。我们将介绍代码替代方法,因为它对于Framer来说更独特,并且不太复杂。

    Step 1: Create the button designs as a Frame (Need to be in a frame to attach override to). We only need the default button here as we can apply the hover state as an override.

    步骤1:将按钮设计创建为框架(需要在框架中附加替代)。 我们这里只需要默认按钮,因为我们可以将悬停状态用作替代。

    Image for post

    Step 2: With your button frame selected, hop over to the properties panel on the right and add an override. Go with the default ‘Example’ file, and for the override dropdown, choose the hover option.

    步骤2:在选择按钮框的情况下,跳到右侧的属性面板并添加替代。 使用默认的“示例”文件,然后在“替代”下拉列表中选择“悬停”选项。

    Image for post

    Step 3: If you click on the preview prototype option at the top right corner (play icon) you can interact with this button and see it’s current hover state, which is a default scaling effect taken from the example override file.

    步骤3:如果单击右上角的预览原型选项(播放图标),则可以与此按钮进行交互,并查看其当前的悬停状态,这是从示例替代文件中获取的默认缩放效果。

    Image for post

    Step 4: So far we’ve applied a hover state to your button design layer and applied an example hover override to it. Let’s look at the override code and modify it to meet our spec. From the Override properties panel, click on ‘Edit Code’. You should then see a code editor (don’t worry, we won’t be coding much to make this example work).

    步骤4:到目前为止,我们已经将悬停状态应用于按钮设计层,并对其进行了示例悬停覆盖。 让我们看一下覆盖代码并对其进行修改以满足我们的规范。 在“替代属性”面板中,单击“编辑代码”。 然后,您应该看到一个代码编辑器(不用担心,为了使此示例正常工作,我们不会进行太多编码)。

    Image for post

    Step 5: What we need to do now is to modify the “Hover() function” starting on line 9 that looks like the code block below. Instead of the “whileHover: { scale: 0.8 }”, which monitors a mouse hover to the button layer and when it’s being hovered it scales the layer to 80% of its original size, we want to modify this to “whileHover: { opacity: 0.7 }” as shown below:

    步骤5:现在,我们需要做的是从第9行开始修改“ Hover()函数” ,该代码类似于下面的代码块。 而不是监视鼠标悬停在按钮层上的“ whileHover:{scale:0.8}” ,而是当鼠标悬停在其上时,它将图层缩放到其原始大小的80%,我们希望将其修改为“ whileHover:{opacity :0.7}” ,如下所示:

    export function Hover(): Override {   return {      whileHover: { opacity: 0.7 },   }}

    Result: The override now should adjust the opacity of the layer to 70% of the original opacity to simulate the hover effect we want.

    结果:现在,覆盖将应将图层的不透明度调整为原始不透明度的70%,以模拟所需的悬停效果。

    Image for post

    优点: (Pros:)

    The override + code components (not covered in this post) are flexible and powerful methods to build high-fidelity prototypes. You can prototype anything that’s feasible from a technical perspective.

    覆盖+代码组件(本文中未介绍)是构建高保真原型的灵活强大的方法。 您可以从技术角度为可行的任何事物制作原型。

    The override on top of the design layer is a good half step to leverage some of the code-level prototyping features but not completely jumping into the full code setup.

    设计层顶部的覆盖是利用一些代码级原型设计功能的好半步,但并不能完全进入完整的代码设置。

    缺点: (Cons:)

    The coding part always have a bit of a learning curve for designers regardless of how elementary. While Framer is a powerful tool, it requires a good amount of time invested to learn the tool if the designer is new to coding.

    无论基础如何,编码部分始终对设计人员有一些学习曲线。 虽然Framer是功能强大的工具,但如果设计人员不熟悉编码,则需要花费大量时间来学习该工具。

    草图 (Sketch)

    Native prototyping feature was introduced since Sketch 49. However, the feature only supports artboard linking on click and lacks hover interaction. Therefore, to prototype hover animation we need to turn to Sketch plugins. There are a few animation plugins available. For this example, we will use the Anima plugin.

    自Sketch 49起引入了本机原型功能。但是,该功能仅支持单击时的画板链接,并且缺少悬停交互。 因此,要使悬停动画原型化,我们需要使用Sketch插件。 有一些可用的动画插件。 在此示例中,我们将使用Anima插件

    Step 1: You need to set up an artboard with the default button style.

    步骤1:您需要使用默认按钮样式设置画板。

    Image for post

    Step 2: Assuming you have the plugin installed and activated. On the bottom right panel, you should see the Anima plugin section. We’ll use the interaction feature under the prototype tab. Select the button background and hit that ‘create’ button.

    步骤2:假设您已安装并激活插件。 在右下方的面板上,您应该看到Anima插件部分。 我们将在原型标签下使用交互功能。 选择按钮背景,然后点击“ 创建 ”按钮。

    Image for post

    Step 3: You will then be taken to the Anima editor, where a new state of the button (this is where you specify what the hover state is) will be created for you. To build the minimal hover state prototype:

    步骤3:然后将您带到Anima编辑器,在其中将为您创建按钮的新状态(这是您指定悬停状态的位置)。 要构建最小悬浮状态原型:

    1. Select the default/state1 button background layer

      选择默认/ state1按钮背景层
    2. A blue lightning bolt icon will be revealed. Click on that icon and connect the line to state2

      将会显示一个蓝色的闪电图标。 单击该图标,然后将线路连接到state2
    3. Choose the on ‘On Mouse Enter’ option. This is to set what interaction should trigger the state transition

      选择“在鼠标输入时”选项。 这是设置什么交互应该触发状态转换

    4. Select the state2 button background and adjust the opacity to 70% to set the hover style

      选择state2按钮背景并将不透明度调整为70%以设置悬停样式

    5. Repeat similar steps to connect the state2 button back to state1 ‘On Mouse Leave’

      重复类似的步骤,将state2按钮连接回state1' 鼠标离开时'

    6. Click on ‘Back to Sketch” on the very top left of your screen to exit the editor

      点击屏幕左上角的“ 返回草图 ”以退出编辑器

    Image for post
    Image for post
    Image for post

    Result: Back to the sketch interface, at the bottom right you should see the Anima section with a ‘Preview in Browser’ button. Click on that will spin up a preview browser tab that lets you play with the button hover state prototype.

    结果:返回草图界面,在右下角,您应该看到带有“在浏览器中预览”按钮的Anima部分。 单击该按钮将启动预览浏览器选项卡,使您可以使用按钮悬停状态原型。

    Image for post

    优点: (Pros:)

    If you are designing with Sketch then the ability to prototype within the same environment is helpful.

    如果您使用Sketch进行设计,那么在同一环境中进行原型设计的功能将很有帮助。

    缺点: (Cons:)

    The prototyping features out of the box may not support exactly what you are trying to simulate. You’ll need to lean on third-party plugins, which has various complexity and learning curve.

    开箱即用的原型功能可能不完全支持您尝试模拟的功能。 您需要依靠第三方插件,该插件具有各种复杂性和学习曲线。

    菲格玛 (Figma)

    Figma recently released more prototyping features that allow designers to build more advanced prototypes within the design environment. The new feature makes it fairly easy to build our example so let’s walk through that.

    Figma最近发布了更多原型设计功能 ,使设计人员可以在设计环境中构建更高级的原型。 新功能使构建示例变得相当容易,因此让我们逐步进行说明。

    Step 1: Set up two frames with each button state design layers.

    步骤1 :为每个按钮状态设计层设置两个框架。

    Image for post

    Step 2: With the default button background layer selected, toggle to the prototype tab located within the right panel.

    步骤2:在选择默认按钮背景层的情况下,切换到右侧面板中的prototype选项卡。

    Image for post

    Step 3: Click on the dropdown to select the ‘While Hovering’ option, second dropdown to ‘Swap with’, set the last dropdown to the name of your second frame.

    步骤3:点击下拉菜单,选择“悬停”选项,第二个下拉菜单选择“交换方式”,将最后一个下拉菜单设置为第二帧的名称。

    Image for post
    Image for post
    Image for post

    Result: You should now see an arrow connecting the default button background to the second frame. Click on the present (play icon) located at the top right corner will allow you to play with the hover prototype.

    结果 :您现在应该看到将默认按钮背景连接到第二帧的箭头。 单击右上角的礼物(播放图标),将使您可以将鼠标悬停在原型上。

    Image for post

    优点: (Pros:)

    With the new Smart Animate feature, prototyping a hover interaction is fairly easy once you have the before and after states created.

    使用新的Smart Animate功能,一旦创建了前后状态,就可以轻松进行悬停交互的原型制作。

    缺点: (Cons:)

    It lacks support for setting custom animation sequences. If you need to animate multiple items in the same interaction with various speed then that is currently not possible.

    它不支持设置自定义动画序列。 如果您需要以不同的速度在同一交互中为多个项目设置动画,那么当前是不可能的。

    There are more tools out there to help with UX prototyping and there isn’t a perfect tool for every job. If you are serious about learning how to prototype well, finding the right tool(s) for the job is critical. Small exercises like the hover examples in this post can help you wrap your head around the strength and weaknesses of a tool.

    那里有更多工具可用于UX原型设计,并且并不是每一项工作都完美的工具。 如果您认真学习如何良好地制作原型,那么找到适合工作的正确工具至关重要。 诸如本文中的悬停示例之类的小练习可以帮助您将注意力集中在工具的优点和缺点上。

    Thanks for taking the time to go through each of the examples. Hopefully, you now have a high-level idea of how to use each of the tools mentioned and you will have some baseline knowledge when you need to choose a tool to prototype your designs in the future.

    感谢您抽出宝贵的时间阅读每个示例。 希望您现在对如何使用提到的每个工具有一个高级的了解,并且当您将来需要选择一种工具来对设计进行原型设计时,您将具有一些基础知识。

    翻译自: https://uxdesign.cc/prototype-a-hover-state-4-ways-85851436ffae

    rp原型中鼠标悬停显示图片

    展开全文
  • 整个图片排成笑脸摸样,网页打开的时候有个逐渐加载的过程,鼠标移动到图片显示当前图片文字介绍。相关链接:随机散开在桌面并可拖动的Flash桌面相册代码。lanrenzhijia.com推荐下载
  • 预览HTML部分展示位置${p.productImg}创建一个放图片的容器去掉当图片没有...}JavaScript部分/*** 显示图片详情,鼠标移入时执行*/function on(productImg) {if (productImg == "undefined" || productImg == null ...

    预览

    7406f5f3ae1d96c96dcaa3dea3f4c5e6.gif

    HTML部分

    展示位置

    ${p.productImg}

    创建一个放图片的容器

    去掉当图片没有路径时默认的边框

    img[src=""],img:not([src]){

    opacity:0;

    }

    JavaScript部分

    /**

    * 显示图片详情,鼠标移入时执行

    */

    function on(productImg) {

    if (productImg == "undefined" || productImg == null || productImg == "") {

    return;

    }

    //给图片容器赋值路径

    $("#s").attr("src", "${pageContext.request.contextPath}/static/images/upload/" + productImg);

    $(document).mousemove(function(e) {

    $("#s").css("position", "absolute").css("left", e.pageX+1+"px").css("top", e.pageY+1+"px");

    })

    }

    /**

    * 关闭图片,当鼠标移出时执行

    */

    function off() {

    $("#s").attr("src", "");

    $(document).mousemove(function(e) {

    $("#s").css("position", "absolute").css("left", "-400px").css("top", "-400px");

    })

    }

    展开全文
  • 鼠标悬停显示二维码图片
  • jQuery图片鼠标悬停图片上放大显示和展开图片标题 jQuery图片鼠标悬停图片上放大显示和展开图片标题
  • jQuery jfade插件鼠标悬停文字图片当前高亮显示 jQuery jfade插件鼠标悬停文字图片当前高亮显示 jQuery jfade插件鼠标悬停文字图片当前高亮显示
  • jquery当当网鼠标悬停图片上替换大图片显示代码 jquery当当网鼠标悬停图片上替换大图片显示代码 jquery当当网鼠标悬停图片上替换大图片显示代码
  • jquery鼠标悬停放大显示图片信息是一款手机app游戏鼠标悬停到单张图片放大显示图片提示详细信息。
  • jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题
  • 幻灯片图片展示效果图鼠标悬停显示遮罩层文字 幻灯片图片展示效果图鼠标悬停显示遮罩层文字 幻灯片图片展示效果图鼠标悬停显示遮罩层文字
  • jquery 图片特效 鼠标悬停图片显示文字与标题内容特效 jquery 图片特效 鼠标悬停图片显示文字与标题内容特效 jquery 图片特效 鼠标悬停图片显示文字与标题内容特效
  • 这是一款非常特色的HTML5鼠标悬停超链接显示图片特效,当鼠标悬停到超链接文字上时,会在超链接下面显示一张设定好的图片或者多张图片切换预览效果。
  • jquery鼠标悬停放大显示图片信息是一款手机app游戏鼠标悬停到单张图片放大显示图片提示详细信息。
  • jQuery鼠标悬停图片动画显示文字信息代码 jQuery鼠标悬停图片动画显示文字信息代码 jQuery鼠标悬停图片动画显示文字信息代码 jQuery鼠标悬停图片动画显示文字信息代码
  • CSS3鼠标悬停图片显示描述,当鼠标悬停图片时,图片平滑向上移动,图片下方显示图片文字描述信息。
  • jQuery鼠标悬停图片遮罩动画显示特效 jQuery鼠标悬停图片遮罩动画显示特效

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 883
精华内容 353
关键字:

鼠标悬停显示图片