文档章节

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

rin9958
 rin9958
发布于 2016/06/24 22:32
字数 465
阅读 106
收藏 2
点赞 0
评论 0

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
程序员
JS/jquery实现鼠标事件控制页面元素显隐

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

GavinHsueh ⋅ 05/21 ⋅ 0

鼠标悬浮时动态改变当前行的背景色 各行换色

1.效果 1.1 各行换色 1.2 JS版本鼠标移动上去变色移出还原 1.23 jQuery版本鼠标悬浮背景颜色 2.代码 2.1各行换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>各行换色</t......

Lucky_Me ⋅ 2017/08/22 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 前天 ⋅ 0

基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。 功能: 1:点击选择图片...

祈澈姑娘 ⋅ 05/17 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

当鼠标聚焦时输入框变色(focus事件实例)

当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框 原理:css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用::focus 一:当输入框获得焦点时,改变它的背景色 效果...

祈澈姑娘 ⋅ 05/11 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 昨天 ⋅ 0

【翻译】Flask大型教程|第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。...

一进制 ⋅ 04/18 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部