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一个视差 ...
随机推荐
- mac os idea的快捷键
全局搜索:shift+command+f 搜索类:command+o 光标向前向后移动:command+option+(左/右) 删除一行: command+delete
- Flutter的教程:ListView
本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非 ...
- RecyclerView中notifyDataSetChanged刷新总结
除了adapter.notifyDataSetChanged()这个方法之外,新的Adapter还提供了其他的方法,如下: public final void notifyDataSetChanged ...
- 怎么打印 sql 语句
1.添加jar包 <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api< ...
- 带你从零学ReactNative开发跨平台App开发（四）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 安装android-sdk，gradle mac 篇
安装包管理器 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...
- Btree并发内存回收
在并发写Btree原理剖析 一文中提到,节点内存回收有可能导致内存突增以及影响写性能.本文将阐述最近对内存回收的改进,多线程可并行回收内存. 回收策略 采用基于版本的机制,Btree全局维护一个版本号 ...
- java虚拟机---内存
java虚拟机---内存 Java虚拟机,即JVM,负责运行java程序,每个java程序都运行在一个具体jvm实例上.Java虚拟机的体系架构分为:类装载子系统.运行时数据区.执行引擎.类装载子系统 ...
- Linux系统重要的开机自启动的服务
重要的开机自启动的服务 1.sshd 连接Linux服务器是需要用到的服务程序 2.rsyslog 操作日志的一种机制 系统日志:/var/log/message ...
- JqGrid中文文档之TreeGrid
几年之前写过一个非常简单的jqgrid属性说明. 今天又用到jqgrid这个控件了,捣鼓了许久,第一个treegrid完成了 jQuery("#list1").jqGrid({ u ...