鼠标经过导航中li时,一个彩色模块跟着鼠标移动
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>
鼠标经过导航中li时,一个彩色模块跟着鼠标移动的更多相关文章
- colormap中的内嵌彩色模块和调用方式
内嵌彩色模块代码: import numpy as npimport matplotlib.pyplot as plt # Have colormaps separated into categori ...
- 在Delphi中DBGrid有一个MouseMove事件,当鼠标移动时怎么知道光标在哪个单元格上面
procedure TForm1.DBGrid1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);var coords:TGr ...
- 问题1:鼠标指向导航栏li,但li中a样式未改变
<!--HTML代码--><div class="nav-mid-left"> <ul> <li><a href=" ...
- JS-鼠标跟随块(一个小圆点跟着鼠标跑)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...
- JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- 一起来学Spring Cloud | 第一章 :如何搭建一个多模块的springcloud项目
在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的spr ...
- Python从内存中使用编译后的模块
在Windows编程的时候,有些时候,我们经常会要使用一些非常规的方法,比如说从内存中加载DLL,然后使用DLL中的函数.于是就思索在用Python的时候是否能够将几个编译好的Pyc合并成一个,然后使 ...
随机推荐
- PCL点云库:ICP算法
ICP(Iterative Closest Point迭代最近点)算法是一种点集对点集配准方法.在VTK.PCL.MRPT.MeshLab等C++库或软件中都有实现,可以参见维基百科中的ICP Alg ...
- Metasploit辅助模块
msf > show auxiliary Auxiliary ========= Name Di ...
- 字段符号FIELD-SYMBOLS
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Servlet&jsp基础:第三部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 小C的故事(快速学C语言,,,极速版!)
前几天这篇博客写了太多废话! 删啦~~. 本篇博客只是为chd A协的全嫩小鲜肉入门C语言的预科, 如果你在此处学习C语言, 不幸走火入魔, 小弱概不负责. //请直接随便找个C语言编译器,抄一下下面 ...
- DB2常识
1.DB2组件 appendixa. db2 database product and packaging informatin一节AESE: 高级企业服务器版(Advanced enterprise ...
- FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/ -----幻灯片插件
$(window).load(function() { $('.flexslider').flexslider({ namespace: 'flex-', //控件的命名空间,会影响样式前缀 anim ...
- maven使用入门(pom)
mvn clean complie mvn clean test mvn clean package mvn clean install(该任务将该项目输出的jar安装到了Maven本地仓库中) 各个 ...
- mysql概要(六)连接
内连接 [join on / from 表1,表二 ]效果一样 区别是:可以理解为首先取得笛卡儿积后,再 内连接:取俩表的匹配数据: 左连接:取的俩表匹配数据,并且保留未匹配数据中左表的数据,右表数据 ...
- Java Socket编程----通信是这样炼成的
Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而在网络编程中,使用最多的就是Socket.像大家熟悉的QQ.MSN都使用了Socket相关的技术. ...