jQuery实现鼠标移入显示蒙版效果

本文实例为大家分享了jQuery鼠标移入显示蒙版的具体代码，供大家参考，具体内容如下

效果展示：

具体代码：

<ul id="fourth_tab">
  <li>
   <img src="img/camera_green.png" alt="绿色相机" class="camera">
   <p class="title"><span>摄影小白成长记</span></p>
   <p>The best preparation for tomorrow is doing your best today.</p>
  </li>
  <li style="background-color: red">
   <div class="show_more"><a href="html/test.html" >点击查看更多</a></div>
   <img src="img/bus.webp" alt="公交车">
  </li>
  <li style="background-color: red">
   <div class="show_more"><a href="html/test.html" >点击查看更多</a></div>
   <img src="img/life.png" alt="落叶">
  </li>
 </ul>
#fourth_tab li{
 position: relative;
 border-radius: 6px;
}
.show_more{
 width: 100%;
 height: 100%;
 line-height: 230px;
 background-color: #9f594d;
 position: absolute;
 display: none;
 font-size: 22px;
 font-weight: bolder;
 letter-spacing: 4px;
 cursor: pointer;
}
.show_more a{
 text-decoration: none;
 color: #fbfff9;
}
$('#fourth_tab li').mouseenter(function(){
 $(this).find('.show_more').slideDown(200);
});

$('#fourth_tab li').mouseleave(function(){
 $(this).find('.show_more').slideUp(200);
});

个人笔记：

1.这里主要使用到jQuery的slideUp()、slideDown()函数
2.在js代码中，使用$(this)来做限制。鼠标移入第二张图片，那么这张图片上面显示蒙版，其他的图片不显示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery实现图片无缝滚动 蒙版遮蔽效果

    本文实例为大家分享了jquery实现图片无缝滚动.蒙版效果的具体代码,供大家参考,具体内容如下 1.无缝连接:通过对li设置属性float:left:消除标签之间的间隔 2.通过对ul整体进行偏移设置,使图片整体滚动, 3.设置图片切换时机, 4.蒙版遮罩移入时机的选择 代码片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • 基于jquery的仿百度的鼠标移入图片抖动效果

    1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="

  • jQuery实现手风琴效果（蒙版）

    jQuery实现手风琴效果（蒙版）

    本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; }

  • jquery蒙版控件实现代码

    样式代码: 复制代码 代码如下: #div_maskContainer { display: none; } /*蒙版样式*/ #div_Mask{ z-index:1000; filter:alpha(opacity=40); position: absolute; left:0px; top:0px; background-color: #D4D0C8; } /*显示信息样式*/ #div_loading{ width:300px;height: 60px;position: absolut

  • jquery实现图片列表鼠标移入微动

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

  • jQuery实现鼠标移入移出事件切换功能示例

    jQuery实现鼠标移入移出事件切换功能示例

    本文实例讲述了jQuery实现鼠标移入移出事件切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script> <style> #msg { color

  • jQuery实现鼠标移入显示蒙版效果

    jQuery实现鼠标移入显示蒙版效果

    本文实例为大家分享了jQuery鼠标移入显示蒙版的具体代码,供大家参考,具体内容如下 效果展示: 具体代码: <ul id="fourth_tab"> <li> <img src="img/camera_green.png" alt="绿色相机" class="camera"> <p class="title"><span>摄影小白成长记</

  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

    本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

  • jQuery实现鼠标悬停显示提示信息窗口的方法

    本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • JQuery实现隐藏和显示动画效果

    JQuery实现隐藏和显示动画效果

    本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码,供大家参考,具体内容如下 隐藏和显示 语法 $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]); 参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. 可选的 call

  • js实现鼠标移入图片放大效果

    js实现鼠标移入图片放大效果

    使用原生js编写一个鼠标移入图片放大效果,供大家参考,具体内容如下 目标 给图片添加鼠标移动放大方法效果,移到哪里放大哪里 先看看效果是不是你想要的,再看代码 移入前 移入后 html <!-- css看着写 -->     <div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidde

  • asp.net中GridView数据鼠标移入显示提示信息

    asp.net中GridView数据鼠标移入显示提示信息

    问题提出: 在asp.net开发中,如果有这样的一个需求,如果在列表控件,如GridView中的某列中显示的是一个计算公式得出的值,那么需求来了,鼠标移入该数字,显示该数字的计算公式和过程,如何做? 解决方案分析: 常规可以使用控件的title属性来显示提示信息,但是显示信息的样式不美观.接下来我们可以使用这样的一个解决方案,其显示效果如下图所示: 详细实现步骤: 1.下载弹出提示框相关js文件包,下载地址:http://download.csdn.net/detail/taomanman/90

随机推荐