jQuery----（类似抽奖转盘）高亮显示
效果如图：
原图 鼠标进入后开始变化图
实现需求：
页面加载开始，效果如原图所示，在鼠标进入盒子后，图片在当前鼠标位置高亮显示，其余图片变暗，依次交替进行。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高亮显示</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: black;
} .wrap{
width: 630px;
margin: 100px auto;
padding: 10px 0px 0px 10px;
height: 394px;
border: 1px solid white;
}
.wrap ul{
list-style: none;
}
.wrap ul li{
margin: 0px 10px 10px 0px;
float: left;
}
.wrap img{
opacity: 0.5;
display: block;
}
</style>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载的时候,获取li,注册鼠标移入和鼠标移出事件
$(function(){
//鼠标移入事件
$(".wrap>ul>li>img").mouseover(function(){
$(this).css("opacity",1);
});
//鼠标移出事件
$(".wrap>ul>li>img").mouseout(function(){
$(this).css("opacity",0.5);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><img src="data:images/01.jpg" ></li>
<li><img src="data:images/02.jpg" ></li>
<li><img src="data:images/03.jpg" ></li>
<li><img src="data:images/04.jpg" ></li>
<li><img src="data:images/05.jpg" ></li>
<li><img src="data:images/06.jpg" ></li>
</ul>
</div>
</body>
</html>
代码分析：
1.页面结构HTML+CSS：
盒子居中 margin:100px auto;
盒子中包括一个ul，li中包含img
2.鼠标进入img，当前img高亮显示
$(".wrap>ul>li>img").mouseover(function(){ $(this).css("opacity",1); });
3.鼠标移出img，取消当前img高亮显示
$(".wrap>ul>li>img").mouseout(function(){ $(this).css("opacity",0.5); });
jQuery----（类似抽奖转盘）高亮显示的更多相关文章
- jquery实现抽奖转盘
用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 利用java实现抽奖转盘(着重安全控制)
本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- 使用CSS3+jquery.js 实现微信抽奖转盘效果
上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...
- Html5-Canvas实现简易的抽奖转盘
###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- jquery实现抽奖
用jquery实现抽奖小程序 用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...
- android仿漫画源码、抽奖转盘、Google相册、动画源码等
Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...
随机推荐
- 润乾配置连接kingbase（金仓）数据库
问题背景 客户根据项目的不同,使用润乾连接的数据库类型各种各样,此文针对前几日使用润乾设计器连接kingbase金仓数据库做一个说明. kingbase金仓数据库是一款国产数据库,操作方式和配置 ...
- 网络 IP地址、网段、子网掩码
IP地址范围,最小:00000000,00000000,00000000,00000000:最大:11111111,11111111,11111111,11111111 即:最小:0.0.0.0 最大 ...
- Storm概念
概念 本文列出了Storm的主要概念及相关的信息链接.讨论到的概念有: Topologies Streams Spouts Bolts Stream groupings Reliability Tas ...
- 聊聊 getClientRects 和 getBoundingClientRect 方法
开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 ...
- springMVC结合AjaxForm上传文件
最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: co ...
- spring boot(13)-logback和access日志
logback logback出自log4j的作者,性能和功能相比log4j作出了一些改进,而配置方法和log4j类似,是spring boot的默认日志组件.在application.propert ...
- (1)构造方法和方法重载 (2)this关键字 (3)方法的传参和递归调用
1.构造方法和方法重载如: Person p = new Person(); - 声明Person类型的引用p指向Person类型的对象 p.show(); - 调用名字为show()的成员方法 1. ...
- [T-ARA][For you]
歌词来源:http://music.163.com/#/song?id=33682511 作曲 : Monster Factory [作曲 : Monster Factory] 作词 : Monste ...
- 3、Django下载与简介
第1节:MVC与MTV模型 1.1 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一 ...
- MySQL管理.md
用户管理 创建 举例 mysql> create user test@localhost identified by 'password'; Query OK, 0 rows affected ...