导航条点击按钮切换效果

<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 实用导航菜单切换 sky整理收集,站长特效网欢迎您。</title>
<style>
* {
margin:0;
padding:0;
font-size:12px;
}
img {
border:none;
}
ul,ol {
list-style:none;
}
#content {
margin:20px auto;
border:1px solid #a5b5c0;
width:158px;
height:241px;
background:url(/img/1_211958.gif);
overflow:hidden;
}
#title {
height:17px;
*height:16px;
background:url(/img/1_211943.gif) repeat-x;
border-bottom:1px solid #a5b5c0;
padding:3px 0 0 6px;
*padding:4px 0 0 6px;
font-weight:700;
}
#title li {
float:left;
display:inline;
width:92px;
}
#tit_l {
float:left;
width:92px;
overflow:hidden;
height:14px;
}
#tit_r {
float:right;
margin-top:-1px;
*margin-top:-2px;
}
#tit_r img {
margin-right:4px;
cursor:pointer;
}
#tit_r img:hover {
filter: Alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#text {
clear:both;
height:210px;
}
#text ul {
background:url(/img/1_212047.gif) no-repeat 12px 4px;
margin:6px 0;
}
#text li {
padding-left:34px;
line-height:21px;
}
#text li a {
color:#123b8d;
text-decoration:none;
}
#text li a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,[email protected],用.net打造靓站-->
<div id="content">
<div id="title">
<div id="tit_l">
<div id="mytit">
<ul>
<li>热门搜索</li>
<li>热门体育</li>
<li>热门娱乐</li>
</ul>
</div>
</div>
<div id="tit_r"><img src="/img/1_212017.gif" /><img src="/img/1_212034.gif" /></div>
</div>
<div id="text">
<ul id="c1">
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
</ul>
<ul id="c2">
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
</ul>
<ul id="c3">
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var myTitle = document.getElementById("mytit");
myTitle.innerHTML += myTitle.innerHTML;
var lists = myTitle.getElementsByTagName("li");
var num = lists.length - 2;
//alert(num)
myTitle.style.width = (num+1) * 92;//计算标题的总长度
var ele = document.getElementById("tit_l");
var w = ele.clientWidth;
var n = 18;
var t = 40;//数值越小,速度越快
var times = new Array(n);
var k = 0;
var l = 0;
yahooo(0);
function yahooo(s)
{
if(k >= num && s > 0)
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
ele.scrollLeft = w;
k = 1;
}
if(k < 1 && s < 0)
{
ele.scrollLeft = (num-1) * w;
k = num-1;
}
k += s;
var x = ele.scrollLeft;
var d = k * w - x;
for(i=0;i<n;i++)
(
function()
{
if(times[i]) {clearTimeout(times[i])} ;
var j = i;
times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
}
)();
}
var imgs = document.getElementById("tit_r").getElementsByTagName("img");
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");
imgs[0].onclick = function()
{
yahooo(-1);
if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
imgs[1].onclick = function()
{
yahooo(1);
if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</body>
</html>

导航条点击按钮切换效果,布布扣,bubuko.com

时间: 07-03

导航条点击按钮切换效果的相关文章

初识安卓小程序(点击按钮切换屏幕颜色)

如图,点击按钮就会切换屏幕的颜色 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"world",当然,也可以别的名称 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="htt

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮navbar-btn 2.导航条中的文本navbar-text 3.导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand.navbar-nav配合起来使用.而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题. <d

Button按钮点击图片切换效果

Button按钮图片切换效果设置. 通常在工程中用到图片按钮点击事件,大多都用ImageButton.在这里我们用 Button的点击事件,在图片的切换过程中不再通过setBackgroundResource()设置 点击效果.而是通过.xml预先设置好切换效果.在这里我们习惯把该.xml文件放到drawable文件夹下. 代码如下: //xml文件   名称这里为test_press.xml 1. android:state_pressed="true"  为点击后效果 2. and

点击按钮切换内容效果(使用CSS DIV与JavaScript)

<head><script type="text/javascript">function change_div(id){  if (id == 'gsywly' )  {     document.getElementById("gsgs").style.display = 'none' ;     document.getElementById("gsywly").style.display = 'block' ;  

Android点击按钮切换背景效果-selector使用方法

有时候我们要实现“按下按钮和释放按钮时,按钮的背景图片(颜色)不同”的效果,我们可以用selector实现 1.编写XML代码:在项目的res/drawable目录下新建xml文件,添加相关代码: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <i

css 导航,菜单对应页面切换效果实现方法

实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的href指向页面位置 li标签的href的指向,通过伪类target指向唯一的页面id: #app-version:target,如果不打算有点击效果,可以在兄弟选择符 ~ 后跟当前 li 标签的 id;如果想要有点击效果,则要在兄弟选择符 ~ 后跟当前li标签的所有父节点 css: /*点击菜单,选

c# winform 点击按钮切换tabcontrol标签

this.tabControl1.TabPages.Remove(tabPage1); this.tabControl1.TabPages.Remove(tabPage2); this.tabControl1.TabPages.Add(tabPage2); TabPage tp = tabControl1.TabPages[0];//在这里先保存,以便以后还要显示 tabControl1.TabPages.Remove(tp);//隐藏(删除) tabControl1.TabPages.Inse

JQuery移动动画实现点击按钮切换图片--JQuery基础

直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

css美化number类型输入框美化实现自定义+、-号点击按钮增减效果

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8" />   <title>Jay Skript And The Domsters</title>  <style type="text/css">  *{border:none;margin:0px;padding:0px;} .numbe