`
Dream丶AL
  • 浏览: 22139 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

图片的显示与隐藏

 
阅读更多

图片的显示或隐藏其实就是修改他的STYLE样式中display属性,

1.当display属性为none时,图片隐藏。

2.当display属性为block时,图片显示。

<a onclick=show('img')>点我显示与隐藏图片</a>
<img  src='/img/selected.png/'  style='display:none'  id='img'>

 

function show(id){
    if(document.getElementById(id).style.display == "block")
    {
        document.getElementById(id).style.display = "none";
    }
    else if(document.getElementById(id).style.display == "none")
    {
        document.getElementById(id).style.display = "block";
    }
}

 document.getElementById(id)是在查找元素,找到这个元素修改其中style.display属性

分享到:
评论

相关推荐

    vb实验3 图片的显示与隐藏

    在本篇内容中,我们将深入探讨Visual Basic(简称VB)中的一个重要实验——“图片的显示与隐藏”。这个实验不仅涵盖了VB编程的基础知识,如控件的使用和事件处理,还涉及了图片显示与隐藏的控制机制,对于初学者来说...

    Vue.js 点击按钮显示/隐藏内容

    实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !...

    威纶通触摸屏如何通过PLC地址控制元件的显示和隐藏?.docx

    ### 威纶通触摸屏通过PLC地址控制元件显示与隐藏的方法 #### 一、引言 在工业自动化领域,触摸屏作为一种重要的用户界面工具,不仅能够方便地进行人机交互,还能够通过与可编程逻辑控制器(PLC)等设备的连接,实现...

    jquery显示隐藏图片效果

    &lt;title&gt;jQuery显示隐藏图片效果 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 示例图片"&gt; 切换显示/隐藏 &lt;script src="script.js"&gt;&lt;/script&gt; ``` 这里,我们有一个`&lt;img&gt;`标签...

    单按钮实现指定图片的显示和隐藏切换.docx

    在这个例子中,我们关注的是如何使用VBA来实现一个按钮,使得点击该按钮可以切换指定图片的显示和隐藏状态。以下是两种实现方法的详细解析: **方法一:基于变量i的状态** 这种方法使用了一个全局变量`i`来记录...

    完美的鼠标放上去jquery显示隐藏层

    在网页设计和开发中,交互性是提升用户体验的关键因素之一,而“完美的鼠标放上去jquery显示隐藏层”正是实现这种交互效果的一种技术手段。这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停(hover)时...

    64位win7右键显示隐藏系统文件不显示扩展名.rar

    本文将详细讲解如何在64位Windows 7系统中设置,以便右键菜单能够显示隐藏的系统文件并显示文件扩展名。 首先,让我们了解隐藏文件和系统文件的作用。隐藏文件通常包含系统或应用程序的重要数据,为了保护它们免受...

    jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)

    在jQuery中,`fadeIn()`, `fadeOut()` 和 `fadeTo()` 是三种用于实现元素淡入淡出效果的方法,尤其在处理图像显示与隐藏时非常实用。这些方法通过改变元素的透明度来达到平滑过渡的效果,给用户带来更加流畅的交互...

    JQuery 鼠标滑过图片显示隐藏标题

    "JQuery 鼠标滑过图片显示隐藏标题"这一技术正是为了实现这种交互效果而设计的。它允许用户在鼠标移动到图片上时,自动显示图片相关的文字描述,提供额外的信息,而当鼠标移开时,这些文字又会自动隐藏,保持页面的...

    鼠标经过显示图片离开隐藏JS代码

    在这个例子中,我们创建了一个`&lt;div&gt;`元素,当鼠标悬停在该元素上时,会触发`onmouseover`事件,调用`showImage`函数,显示隐藏的图片(通过移除CSS类`hidden`来实现)。当鼠标离开`&lt;div&gt;`元素,`onmouseout`事件被...

    Treenode显示或者隐藏图片

    总结起来,`Treenode显示或者隐藏图片`涉及在`TreeView`控件中管理和显示`TreeNode`的图像。通过创建和管理`ImageList`,以及正确设置`TreeNode`的`ImageIndex`属性,可以实现这一功能。同时,还可以根据需要动态地...

    【C#】第十九讲 DataGridView控件的数据列显示与隐藏控制.zip

    在本讲中,我们将深入探讨C#编程中的DataGridView控件,特别是如何管理和控制数据列的显示与隐藏。DataGridView是Windows Forms应用程序中一个强大的组件,用于显示表格数据,并提供了丰富的交互功能,如排序、编辑...

    TIA WinCC PRO中通过脚本控制图层的显示和隐藏.rar

    这个教程将深入讲解如何利用WinCC PRO中的脚本功能来实现图层的动态显示和隐藏,从而提升用户的交互体验和系统的灵活性。 一、图层的概念与作用 在WinCC PRO中,图层是一种组织画面元素的有效方式。每个图层可以...

    jquery滑动显示和隐藏图片效果.rar

    本示例"jquery滑动显示和隐藏图片效果.rar"聚焦于一个常见的交互设计元素:通过滑动操作来控制图片的显示与隐藏,这在网页动态效果中非常常见,如轮播图、滑动面板等。这一技术主要依赖于jQuery的事件处理和CSS样式...

    滑动显示和隐藏图片效果.rar_滑动显示和隐藏图片效果

    2. **jQuery的显示与隐藏方法**:`.show()`和`.hide()`是jQuery中最基本的两个方法,用于控制元素的可见性。可以配合速度参数,如`.show('slow')`,让隐藏或显示过程平滑进行。 3. **jQuery的滑动效果**:`....

    jQuery图片切换显示隐藏左右按钮控制图片-20130626

    3. 显示与隐藏:在描述中提到的“显示隐藏左右按钮”,指的是在图片切换时,左右箭头(或按钮)的可见性会根据当前图片的位置进行调整。例如,当当前图片为第一张时,左箭头可能隐藏;最后一张时,右箭头隐藏。 4. ...

    点击图片或文字显示隐藏层,带缓冲效果(动画效果)

    本文将深入探讨“点击图片或文字显示隐藏层,带缓冲效果(动画效果)”这一主题,以及与之相关的“显示层”、“隐藏层”、“缓冲”和“动画”知识点。 首先,我们需要理解“显示层”和“隐藏层”的概念。在网页或...

    jquery图片标题显示隐藏特效

    总结,本教程介绍了如何使用jQuery创建一个图片标题显示隐藏的特效。通过结合HTML、CSS和jQuery,我们可以实现鼠标悬停时标题自动显示,离开时标题自动消失的功能,提升网页的互动性和用户体验。这个特效适用于懒人...

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    在微信小程序中实现滑动页面隐藏和显示组件的功能,主要是为了提升用户体验,使页面元素在特定的滚动状态下自动隐藏或显示,以符合用户的使用习惯。例如,当页面滚动到一定高度时,导航栏或底部按钮等可以自动隐藏,...

    JAVASCRIPT显示图片的案例

    在JavaScript中,显示图片是一项基本的操作,广泛应用...4. 图片显示与隐藏的控制 5. 图片的预加载 6. 图片的动态交互 学习并理解这些知识点,将有助于你在实际项目中灵活地运用JavaScript来控制和管理网页中的图片。

Global site tag (gtag.js) - Google Analytics