1010cc时时彩标准版 > 1010cc时时彩标准版 > 【1010cc时时彩标准版】基于jQuery的简单的列表导

原标题:【1010cc时时彩标准版】基于jQuery的简单的列表导

浏览次数:170 时间:2019-12-01

menu.css 复制代码 代码如下: @CHA奥迪Q5SET "UTF-8"; *{ margin: 0px; padding: 0px; } ul,li{ list-style-type: none; } .menu{ width: 190px; border: 1px red solid; background-color: #fffdd2; } .optn{ width: 190px; line-height: 28px; border-top: 1px red dashed; } .content{ padding-top:10px; clear: left; } a{ text-decoration: none; color: #666; padding: 10px; } .optnFocus{ background-color: #fff; font-weight: bold; } div{ padding: 10px; } .tip{ width: 190px; border: 2px red solid; position: absolute; background-color: #fff; display: none; } .tip li{ line-height: 23px; } 接下来正是最首要的jquery代码:menu.js 复制代码 代码如下: ${ var curY;//获取所选想的TOP var curH;//获取所选的Height var curW;//获取所选的width var objL;//获取当前指标//自定义函数用于获取当前地方 function setInitValue{ curY=obj.offset(卡塔尔.top; curH=obj.height; } //设置当前所接纳的鼠标滑动事件 $.mouseover{ objL=$;//获取当前目的 setInitValue; var allY=curY-curH "px"; objL.addClass; //获取气成分下的下一个ul $.css({"top":allY,"left":curW}卡塔尔国;; }卡塔尔(英语:State of Qatar); $.mouseout.removeClass; $; }卡塔尔(英语:State of Qatar); //为了制止移到子菜单时子菜单不见,大家也要为子菜单设置鼠标事件 $.mouseover.show.prev; setInitValue; objL.addClass; $.mouseout.hide.removeClass; 注意要点: 1.是因为我们用的是较高版本的jquery文件库,所以某个措施是不扶持的,举例获取下一个要素的率先个子成分next,在10.1中是不协助的,所以作者换了生龙活虎种方法$,表示在select的节制开展成分的接纳2.方方面面功用的兑现大家还要为子选项框绑定鼠标事件,指标正是为着不在我们移动到子选项卡中,猝然未有。 要促成赏心悦目标机能就需求加一些图纸和体制,可是原理是千篇生机勃勃律的哦

.content{ 

5.好了,水到渠成了......

$(".content-menu").hide();
});
});
//主次因素排列Logo部分
function arrange(){
var ul=$(".icons");
var working=$(".working");
//地点坐标
var position={x:0,y:0,bottom:110,width:50,height:50,parent:{height:0,width:0},padding:{top:10,left:10,right:0,bottom:10}};

信赖初学HTM DIV CSSl的校友们一定也想做出天猫网首页的美食指南动漫吧。前些天大家就带大家心得一下级联菜单的浮现。笔者笔者只是完毕了简要地功用,可是全部来讲原理是千篇大器晚成律的哦,那么先让我们看看效果图吧。 那么要兑现那些作用大家本来要选拔到的是jQuery,那么本身就伊始上课怎么办的了,先上html和css的代码 复制代码 代码如下:

<span>Computer数码类成品</span> 

好了 起初步入正题吧: 1.第一定义CSS样式表: 复制代码...

<script>
for (var i = 1; i <= 4; i ) {
var html = "";
html = '<li>';
html = '<img src="images/' i '.gif">';
html = '<div class="text">图标' i '</div>';
html = '</li>';
document.write(html);
}
</script>

  • 计算机数码类产物

    • 笔记本
      • 笔记本1
      • 笔记本1
      • 笔记本1
      • 笔记本1
    • 移动硬盘
      • 一抬手一动脚硬盘1
      • 移步硬盘1
      • 运动硬盘1
      • 活动硬盘1
    • APP
      • 应用程式1
      • 应用软件1
      • APP1
      • 应用软件1
    • 数码产品
      • 数码付加物1
      • 数码产品1
      • 数码付加物1
      • 数码成品1

 

3.定义HTML标签:

//工作区
var working=$(".working");

menu.html

 

1.首先定义CSS样式表:

$(".icons li").mousedown(function(){
$(".icons li").removeClass("icons-focus");
$(this).addClass("icons-focus");
//改造近来的目录
$(".icons li").css("z-index",0);
$(this).css("z-index",1);
});

上边是自己做的多个轻巧的领航菜单,因为是生手,难免有怎么着窘迫的地点,希望我们拍砖!

position.parent.height=working.height()-40;
position.parent.width=working.width();

 

复制代码 代码如下:

CSS代码:

.tip li{ 

复制代码 代码如下:

switch (text) {
case "刷新":
document.location.reload();
break;
case "退出登入":
if(confirm("是不是要抽离登入?"卡塔尔(قطر‎卡塔尔(قطر‎{

<meta http-equiv="description" content="this is my page"> 

1010cc时时彩标准版 1

//注册resize事件
$(".window").draggable({containment: 'parent'});
$(".window").resizable({containment: 'parent'});

<html> 

运转的职能如下:

复制代码 代码如下:

在乎要点: 

4.接下来是概念最入眼的JQUEEvoqueY代码了:

}
break;
default:
break;
}

$(".tip",this).hide(); 

<ul>
<li class="menu">
<div>
<img alt="" src="Images/icon.gif" />
<span>计算机数码类产物</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">应用程式</a></li>
<ul class="tip">
<li><a href="#">应用程式1</a></li>
<li><a href="#">应用程式2</a></li>
<li><a href="#">APP3</a></li>
<li><a href="#">APP4</a></li>
<li><a href="#">应用软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产物</a></li>
<ul class="tip">
<li><a href="#">数码产物1</a></li>
<li><a href="#">数码产物2</a></li>
<li><a href="#">数码产物3</a></li>
<li><a href="#">数码付加物4</a></li>
<li><a href="#">数码付加物5</a></li>
</ul>
</ul>
<img id="sort" src="Images/sort.gif" alt=""/>
</li>
</ul>

<div class="content-menu">
<ul>
<li><a href="javascript:;">刷新</a></li>
<li><a href="javascript:;">设置</a></li>
<hr/>
<li><a href="javascript:;">帮助</a></li>
<hr/>
<li><a href="javascript:;">关于</a></li>
<hr/>
<li><a href="javascript:;">系统安装</a></li>
<li><a href="javascript:;">退出登入</a></li>
</ul>
</div>

objL.addClass("optnFocus"); 

<style type="text/css">
body{font-size:13px}
ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
.content{padding-top:10px;clear:left}
a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{line-height:23px;}
#sort{position:absolute;display:none}
</style>

//回车展开选中的Logo
if(event.keyCode==ENTER){
var open=$(".icons-focus");
alert("ok enevt is enter");
}

padding: 10px; 

2.援用JQUEKugaY的框架,大家能够去官网络下载最新的JQUE景逸SUVY,好像JQUE中华VY1.5的版本都发表了,链接地址:

复制代码 代码如下:

.tip{ 

复制代码 代码如下:

}
.content-menu ul li a:hover {
background-color: #DDD;
}
.content-menu ul hr {
margin: 1px 0px;
height: 0px;
border: 0px;
border-bottom: #CCC 1px solid;
}

width: 190px; 

好了 最先步入正题吧:

if (event.keyCode == UP) {
$(".icons li").removeClass("icons-focus");
elem.prev().addClass("icons-focus");
}

text-decoration: none; 

<script type="text/javascript">
$(function() {
var curY; //获取所选择的Top值
var curH; //获取所接收的Height值
var curW; //获取所选拔的Width值
var srtY; //设置提醒箭头的Top值
var srtX; //设置提示箭头的Left值
var objL; //获取当前目的
/*
*设置当前地方数值
*参数obj为方今目的名称
*/
function setInitValue(obj) {
curY = obj.offset().top
curH = obj.height();
curW = obj.width();
srtY = curY (curH / 2卡塔尔国 "px"; //设置提醒箭头的Top值
srtX = curW - 5 "px"; //设置提醒箭头的Left值
}
$(".optn"卡塔尔国.mouseover(function(卡塔尔(قطر‎ {//设置当前所挑选的鼠标滑过事件
objL = $(this卡塔尔国; //获取当前目的
setInitValue(objL卡塔尔; //设置当前职分
var allY = curY - curH "px"; //设置提醒框的Top值
objL.addClass("optnFocus"卡塔尔(英语:State of Qatar); //扩张获取关节时的样式
objL.next("ul"卡塔尔.show(卡塔尔.css({ "top": allY, "left": curW }卡塔尔国//展现并安装提醒框的坐标
$("#sort"卡塔尔国.show(卡塔尔(英语:State of Qatar).css({ "top": srtY, "left": srtX }卡塔尔国; //呈现并安装提示箭头的坐标
})
.mouseout(function(卡塔尔 {//设置当前所选择的鼠标移出事件
$(this卡塔尔(英语:State of Qatar).removeClass("optnFocus"卡塔尔国; //删除获取关节时的体制
$(this卡塔尔国.next("ul"卡塔尔(英语:State of Qatar).hide(卡塔尔国; //隐蔽提醒框
$("#sort"卡塔尔国.hide(卡塔尔(英语:State of Qatar); //隐蔽提醒箭头
})
$(".tip").mousemove(function() {
$(this卡塔尔.show(卡塔尔; //呈现提醒框
objL = $(this卡塔尔(英语:State of Qatar).prev("li"卡塔尔(قطر‎; //获取当前的上级li对象
setInitValue(objL卡塔尔(英语:State of Qatar); //设置当前岗位
objL.addClass("optnFocus"卡塔尔(英语:State of Qatar); //扩张上级li对象得到关节时的样式
$("#sort"卡塔尔(英语:State of Qatar).show(卡塔尔.css({ "top": srtY, "left": srtX }卡塔尔(قطر‎; //展现并安装提示箭头的坐标
})
.mouseout(function() {
$(this卡塔尔(英语:State of Qatar).hide(卡塔尔(قطر‎; //掩盖提醒框
$(this卡塔尔(قطر‎.prev("li"卡塔尔(قطر‎.removeClass("optnFocus"卡塔尔(英语:State of Qatar); //删除获取关节时的体裁
$("#sort"卡塔尔.hide(卡塔尔(英语:State of Qatar); //蒙蔽提醒箭头
})
})
</script>

假若供给任何效用,请引进jquery-ui和jquery-ui.css 截图: js代码: 复制代码 代码如下: $(function(卡塔尔国 { //菜单列表 var menu_list=$...

//Logo拖拽
$(".icons li").draggable();

<li><a href="#">APP1</a></li> 

$(this).css("top",position.y "px");
$(this).css("left",position.x "px");

border-top: 1px red dashed; 

</div>

 前几日我们就带我们心得一下级联菜单的显得,只是达成了简便易行的法力,不过基本上原理是相近的

if(position.y>=position.parent.height-position.bottom){
position.y=0;
position.x=position.x position.width position.padding.left;
}
});
}

 

</ul>

.optnFocus{ 

if(event.keyCode==DOWM){
$(".icons li").removeClass("icons-focus");
elem.next().addClass("icons-focus");
}

<li><a href="#">应用软件1</a></li> 

html代码:

var curW;//获取所选的width 

$(".icons li").dblclick(function(){
alert("double click");
});

 

//剖断坐标
var width=document.body.clientWidth;
var height=document.body.clientHeight;

objL.addClass("optnFocus"); 

</script>
</body>
</html>

 

//点击工作区的时候 展现右键菜单
$(".working").contextmenu(function(event) {

<title>menu.html</title> 

<div class="menu">

curH=obj.height(); 

//屏蔽右键菜单
$(document).contextmenu(function() {
return false;
});

var x=event.clientX;
var y=event.clientY;
var menu=$(".content-menu");

}); 

<div class="working">

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<div class="taskbar">
<div class="menu-list">
<ul>
<li></li>
</ul>
</div>

 

<a href="javascript:;"></a>
</div>

<li><a href="#">笔记本1</a></li> 

working.click(function() {
menu_list.hide();
$(".content-menu").hide("slow");
});

 

$(".icons li").mouseout(function(){
$(this).removeClass("icons-move");
});

color: #666; 

x=(x menu.width())>=width?width-menu.width():x;
y=(y menu.height())>=height-40?height-menu.height():y;

$(".tip").mouseover(function(){ 

//菜单Logo单击
$(".menu").bind("click",function() {
menu_list.show();

<li><a href="#">移动硬盘1</a></li> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="css/window.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script language="JavaScript" src="js/jquery-1.10.0.js"></script>
<script language="JavaScript" src="js/jquery-ui.js"></script>
<script language="JavaScript" src="js/window.js"></script>
</head>
<body>

<li><a href="#">应用软件1</a></li> 

});
arrange();

$(this).removeClass("optnFocus"); 

@CHARSET "UTF-8";
body, html {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.working {
height: 100%;
width: 100%;
background-image: url("../images/untitled.png");
background-repeat: no-repeat;
background-color: rgb(235, 236, 238);
padding: 20px;
}
.working ul {
height: 100%;
position: relative;
}
.working ul li {
position: absolute;
display: block;
width: 90px;
height: 90px;
text-align: center;
margin: 0px 10px 10px 10px;
float: left;
border: inherit 1px inherit;
overflow: hidden;
cursor: pointer;
}
.taskbar {
position: absolute;
height: 35px;
line-height: 35px;
width: 100%;
bottom: 0px;
background-color: #CCC;
z-index: 999;
filter: alpha(opacity = 80);
opacity: 0.8;
padding: 0px 10px;
}
.menu {
display: block;
width: 50px;
height: 30px;
float: left;
}
.menu-list {
position: absolute;
left: 0px;
bottom: 35px;
width: 350px;
height: 500px;
border: #CCC 1px solid;
background-color: white;
filter: alpha(opacity = 90);
opacity: 0.9;
border-radius: 5px;
display: none;
}
ul {
margin: 0px;
padding: 0px;
}
.menu-icon {
cursor: pointer;
}
.menu-icon ul li {
display: block;
width: 15px;
height: 15px;
float: left;
margin: 1px;
background-color: white;
border-radius: 3px;
}
.menu-icon:hover li {
background-color: red;
}
.icons li img {
max-height: 70px;
max-width: 90px;
}
.text {
position: static;
height: 20px;
line-height: 20px;
width: 100%;
margin: 0px;
font-size: 12px;
font-family: 微软雅黑;
color: white;
}
.icons-move {
border: rgb(161, 194, 219) 1px solid;
background-color: rgb(194, 208, 226);
filter: alpha(opacity = 60);
opacity: 0.6;
border-radius: 3px;
}
.icons-focus {
border: rgb(161, 194, 219) 1px solid;
background-color: rgb(194, 208, 226);
filter: alpha(opacity = 100);
opacity: 1;
border-radius: 3px;
}
.window {
height: 200px;
width: 200px;
border: #CCC 1px solid;
background-color: white;
border-radius: 5px;
position: absolute;
top: 0px;
z-index: 10;
}
/*
* 右键菜单
*/
.content-menu {
position: absolute;
width: 150px;
height: auto;
background-color: rgb(255, 255, 255);
border: #CCC 1px solid;
display: none;
border-radius:5px;
z-index:999;
}
.content-menu ul {
margin: 0px;
padding: 0px;
}
.content-menu ul li {
list-style: none;
line-height: 30px;
height: 30px;
margin: 3px 0px;
padding:0px;
font-size: 13px;
}
.content-menu ul li a{
text-decoration:none;
display:block;
font-family: 微软雅黑;
padding:0px 5px;
width:140px;
height:100%;
color: #333;
outline:none;

var curH;//获取所选的Height 

if(elem.html()=="undefined")return;

<li><a href="#">移动硬盘1</a></li> 

//content-menu
$(".content-menu ul li").click(function() {
var text=$(this).text();

objL=$(this卡塔尔;//获取当前指标 

<div class="menu-icon">
<ul><li></li><li></li><li></li><li></li></ul>
</div>

ul,li{ 

注:供给引进Jquery
如果急需全方位效果与利益,请引入jquery-ui和jquery-ui.css
截图:
1010cc时时彩标准版 2 
js代码:

<li class="optn"><a href="#">笔记本</a> 

复制代码 代码如下:

background-color: #fffdd2; 

<div class="window" title="窗体">窗体</div>

*{ 

//菜单列表
var menu_list=$(".menu-list");

 

position.y=position.y position.height position.padding.bottom position.padding.bottom;

本文由1010cc时时彩标准版发布于1010cc时时彩标准版,转载请注明出处:【1010cc时时彩标准版】基于jQuery的简单的列表导

关键词:

上一篇:1010cc时时彩标准版不错的提醒音讯效果代码_jqu

下一篇:没有了