文档章节

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

rin9958
 rin9958
发布于 2016/06/24 22:32
字数 465
阅读 110
收藏 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
程序员
使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

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

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

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

bestvist
06/22
0
0
JS/jquery实现鼠标事件控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一...

GavinHsueh
05/21
0
0
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei
2014/03/05
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
2
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
2
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
54
8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部