鼠标经过导航中li时，一个彩色模块跟着鼠标移动
2024-09-17 09:27:52
1、鼠标经过导航中li时，一个活动的li跟随鼠标移动，最终移动到鼠标的停留的位置。（如需鼠标离开后让活动的li回到初始位置，则用jq hover事件，当鼠标离开时，给活动的li设置left是0）
2、鼠标经过div时，图片放大，layer层出现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .con {
margin: 20px auto;
width: 200px;
border: 1px solid #ccc;
position: relative
} .con_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #000;
opacity: 0;
z-index: 10;
transition: all 1s linear 0s;
} .con_img {
width: 100%;
height: 200px;
overflow: hidden;
z-index: 1;
} .con img {
width: 100%;
transition: all 1s linear 0s;
} .con:hover img {
transform: scale(1.2)
} .con:hover .con_layer {
opacity: 0.5;
} .line {
margin: 60px auto;
border: 1px solid #fff;
width: 0;
} .para {
color: #fff;
margin: 40px auto;
text-align: center;
} .clearfix {
zoom: 1;
} .clearfix:after {
content: ".";
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden
} .nav {
background-color: #0099cc;
list-style: none;
position: relative;
z-index: 999
} .nav li {
float: left;
width: 200px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
transition: all 0.5s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
} .nav li a {
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
} .nav li:hover a {
font-weight: bold;
} .nav .nav_bg {
position: absolute;
left: 0;
top: 0;
background-color: #FF9900;
z-index: -1;
border-radius: 5px;
box-shadow: 0px 0px 4px #333
} .next {
padding: 0 20px;
width: 200px;
height: 36px;
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: red url("ico-bg.png") no-repeat center;
transition:all 1s linear 0s;
} .next:hover {
background:green url("ico-bg.png") no-repeat 200px center; }
</style>
</head>
<body>
<div class="con">
<div class="con_img">
<img src="1.jpg" alt=""/>
</div>
<div class="con_layer">
<div class="para">我是图文解说</div>
<div class="line"></div>
</div>
<p>
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
</p>
</div>
<ul class="nav clearfix">
<li><a href="javascript:void (0);">111</a></li>
<li><a href="javascript:void (0);">222</a></li>
<li><a href="javascript:void (0);">333</a></li>
<li><a href="javascript:void (0);">444</a></li>
<li><a href="javascript:void (0);">555</a></li>
<li><a href="javascript:void (0);">666</a></li>
<li class="nav_bg"></li>
</ul>
<div class="next"></div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".con").hover(function () {
$(".line").animate({width: "120px"}, 1000)
}, function () {
$(".line").animate({width: 0}, 1000)
});
var flag = 200;
$(".nav").find("li").on("mouseover", function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
});
/* $(".nav").find("li").hover(function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
},function(){
$(".nav_bg").css({left:0})
})*/
</script>
</html>
最新文章
- AVAudioPlayer
- ViewPager+GridView实现横向滑动 仿大众点评
- PHP图片裁剪_图片缩放_PHP生成缩略图
- (转)Linux下root密码丢失和运行级别错误的解决办法
- SQL挑战——如何高效生成编码
- 十、Java基础---------面向对象之抽象类与接口
- 数据库表-DD01L DD02L DD03L-保存数据表和域的消息
- lnux下源码安装MySQL 5.6
- 自定义元素 – 在 HTML 中定义新元素
- 关于mobiscroll插件的使用
- Activity数据传输到服务
- ruby错误
- activiti源码分析
- echarts功能配置实例----柱/折线、饼图
- 求两个排序数组中位数 C++
- spring生命周期流程图
- 关于nginx报错/usr/share/nginx/html/jiankongshare" failed (2: No such file or directory)的问题解决
- 20155232《网络对抗》Exp 6 信息搜集与漏洞扫描
- init命令详解
- python学习笔记——mongodb数据库