文档章节

鼠标移入/移出改变图片透明度_jQuery效果

rin9958
 rin9958
发布于 2016/06/24 22:32
字数 465
阅读 111
收藏 2

enter image description here

浏览聚美优品的时候看到的这个效果,鼠标移入图片后,当前图为高亮,*图片为灰色显示,移出图片区域后,图片重新变为高亮。挺绕口的,直接上代码,大家预览看下就晓得了,这种效果貌似电商网站用的还比较多。 代码图片直接用的聚美优品的,在此说明一下。 本来想用javascript写的,有思路,但是掌握不熟练,无从下手,遂改用jQuery写,代码很简单,一看即可明白。

小知识点:

1.jQuery中鼠标经过为mouseover,鼠标离开为mouseout。

2.透明度设置的css代码:opacity:0.5; filter:alpha(opacity=50); 代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
li{ list-style:none;}

#top_banner{ width:400px;}
#top_banner li{  }
#top_banner li a{ position:relative; display:block; width:190px; height:150px;float: left;margin-right:10px; margin-bottom:10px;}
.mask_Layout{ width:190px; height:150px; position:absolute; left:0; top:0;}
.cur .mask_Layout{
     background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $oLi=$('#top_banner ul li');
    $oA=$('#top_banner ul li a');

    $oLi.mouseover(function(){
        $oLi.addClass('cur');
        $(this).removeClass('cur');
        }).mouseout(function(){
            $oLi.removeClass('cur');
            })

    })
</script>

</head>

<body>
<div id="top_banner">
    <ul>
        <li>
            <a href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_0.jpg" alt="欧莱雅">
                <div class="mask_Layout"></div>
            </a>
         <li>
             <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_1.jpg" alt="丝塔芙">
                <div class="mask_Layout"></div>
             </a>
         </li>
         <li>
            <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/863_13.jpg" alt="曼秀雷敦">
                <div class="mask_Layout"></div>
            </a>
         </li>
         <li>
            <a target="_blank" href="#">
                <img width="190" height="150" src="http://images.jumei.com/banner/63/new_mall_show/484_2.jpg" alt="佰草集">
                <div class="mask_Layout"></div>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

转载自:http://www.9958.pw/post/html_img_mouseout

© 著作权归作者所有

共有 人打赏支持
rin9958
粉丝 9
博文 113
码字总数 54109
作品 0
程序员
私信 提问
8 款个性化的 jQuery 和 CSS3 菜单

下面要给大家分享8款非常个性化的jQuery和CSS3菜单,这些菜单由于外观比较独特,所以也许不是非常通用,但是我们可以认可的是这些菜单的设计思路非常棒,值得借鉴。下面一起来看看这些菜单吧...

android哥哥
2012/08/22
2.8K
4
jquery,移入移出,隐藏某层!

一开始《回复》的DIV的隐藏的,鼠标移入《sad》就会显示, 这是两个层, 我想的效果的,我移入《sad》显示《回复》,这时候可以移入《回复》。但是在移出《回复》《sad》的时候, 要让这个回...

刘三刀
2013/04/10
4.1K
2
使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

1、 jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事...

逆風〠飛翔
08/07
0
0
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
06/22
0
0
Vue.js自定义指令的用法与实例

 市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲自定义指令的用法。   自定义指令是用来...

大灰狼的小绵羊哥哥
12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C#匿名委托

list自定义排序 //list自定义排序public static List<string> sortList(List<string> m_str,string splitStr) //a b表示列表中的元素{String[] strArray=m_str.ToArray();......

青衣霓裳
13分钟前
0
0
Python 之父退位后,会有新任终身仁慈独裁者吗?怎么产生?

随着 Python 之父 Guido van Rossum 逐步卸任 BDFL,Python(CPython)的未来之路牵动了万千开发者的心。没了首领,Python 今后的发展会怎么样?社区将如何运作?谁来领导 Python 这门语言和...

编辑部的故事
18分钟前
6
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linux-tao
今天
20
0
MySQL: Starting MySQL….. ERROR! The server quit without updating PID file

前段时间打包了一个数据库镜像,但是启动容器之后发现报错 ··· ··· MySQL: Starting MySQL….. ERROR! The server quit without updating PID file 查了网络上的解决方案比较全,遂转帖...

blackfoxya
今天
6
0
C4C销售订单行项目价格维护方法

需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域。 如下图所示: 下面是具体配置。 Business Configuration里,点击Sales Order的配置: ...

JerryWang_SAP
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部