jquery html 鼠标悬浮出现列表切换
效果截图

HTML结构为:
<div class="activityBox">
<ul class="activityTab">
<li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣专区</li>
<li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">团购推荐</li>
<li id="BeautyTuan" class="">特卖推荐</li>
</ul>
<ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
中间内容区
</ul>
<ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
中间内容区
</ul>
<ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
中间内容区
</ul>
</div>
JS代码为:
$(function(){
//左右切换效果
$(".activityTab li").live("hover",function(){
$(".activityTab li").removeClass("active");
$(this).addClass("active");
$(".activityCenter").css("display","none");
var activityTabID=$(this).attr("id");
$("#"+activityTabID+"Center").show();
return false;
});
});
jquery html 鼠标悬浮出现列表切换的更多相关文章
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- 鼠标悬浮弹出标题制作JQuery
今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用JS实现鼠标悬浮切换显示
实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- jquery特效(5)—轮播图③(鼠标悬浮停止轮播)
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
- 自定义jq插件,鼠标悬浮展示图片或者视频放大图,可自定义展示内容
网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...
- 重写TreeView,多层级节点下批量显示图片,图片支持缩略图和文件名列表切换,支持调用者动态匹配选中,支持外界拖入图片并添加到对应节点下
1.先看下整体效果 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl" xmlns=" ...
随机推荐
- Android开发各种Utils收集库
为方便查找,已进行大致归类,其目录如下所示: Activity相关→ActivityUtils.java→Demo isActivityExists : 判断是否存在Activity launchAc ...
- 搭建Kafka开发环境
Kafka版本是:kafka_2.10-0.8.2.1 1.maven工程方式 在pom.xml中配置kafka依赖 1 2 3 4 5 <dependency> <grou ...
- angularjs初识ng-app、ng-model、ng-repeat指令
ng-app属性是angular.js的标志语句,它标记了angular.js的作用域.ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用.也可以 ...
- JQuery 选择器 筛选器
什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
- OpenStreetMap、googleMap等经纬度和行列号之间相互转化(python,JavaScript,php,Java,C#等)
python: # OpenStreetMap经纬度转行列号 def deg2num(lat_deg, lon_deg, zoom): lat_rad = math.radians(lat_deg) ...
- hibernate中指定非外键进行关联
/** * 上级资源 */ @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "PARENT_ID", reference ...
- Vue-学习。
---恢复内容开始--- Vue.js 与 Angular.js 非常相似,只要学过了Angular.js然后在学Vue.js就非常的简单. 什么是Vue? 相比Angularjs和ReactJS,V ...
- 转 Ubuntu Linux 环境变量PATH设置
Ubuntu Linux系统环境变量配置文件: /etc/profile : 在登录时,操作系统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...
- UITableVIew与UICollectionView带动画删除cell时崩溃的处理
UITableVIew与UICollectionView带动画删除cell时崩溃的处理 -会崩溃的原因是因为没有处理好数据源与cell之间的协调关系- 效果: tableView的源码: ModelC ...
- python面向对象-封装and多态
python 接口类和抽象类 为什么讲封装之前要将这个东西? 我才不会说为什么 首先: python没有接口类这个概念!!!!!!!! 哈哈哈......神经病 python抽象类和接口类更接近于一种 ...