jquery 实现斜导航效果_JavaScript

jquery 实现斜导航效果

运行后刷新一下，才可以，也可以保存本地直接运行也可。

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>jquery导航菜单</title> 
<style type="text/css"> 
#menu1 { width:970px;height:45px;} 
#menu1,#menu1 a , #menu1 a span{ background-image:url(http://img.jb51.net/demo/images/daohao.gif);} 
#menu1 a{ display:block;float:left;height:45px;} 
#menu1 a span{ float:right;width:33px; height:45px; background-position:-970px 0;} 
#menu1 a span.sj{ background-position:-1003px 0;} 
#menu1 a.a1{ width:168px; background-position:0 0;} 
#menu1 a.a2{ width:117px; background-position:-168px 0;} 
#menu1 a.a3{ width:113px; background-position:-285px 0;} 
#menu1 a.a4{ width:114px; background-position:-398px 0;} 
#menu1 a.a5{ width:111px; background-position:-512px 0;} 
#menu1 a.a6{ width:114px; background-position:-623px 0;} 
#menu1 a.a7{ width:113px; background-position:-737px 0;} 
#menu1 a.a8{ width:120px; background-position:-850px 0;} 
#menu1 a.nowa1{ background-position:0 45px;} 
#menu1 a.nowa2{ background-position:-168px 45px;} 
#menu1 a.nowa3{ background-position:-285px 45px;} 
#menu1 a.nowa4{ background-position:-398px 45px;} 
#menu1 a.nowa5{ background-position:-512px 45px;} 
#menu1 a.nowa6{ background-position:-623px 45px;} 
#menu1 a.nowa7{ background-position:-737px 45px;} 
#menu1 a.nowa8{ background-position:-850px 45px;} 
</style> 
 
 
</head> 
<body> 
        <div id="menu1"> 
             
             
             
             
             
             
             
             
        </div> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

javascript实现图片轮换动作方法

图片轮换是一种相当复杂的技术，早些年基本用flash实现。这里有一个，教大家如何用flash实现它的。之所以用flash，是因为flash是基于帧的，这与图片轮... [阅读全文]

基于javascript的无缝滚动动画实现2

以更少的代码实现相同的效果应该是我们写程序的究极目标，当然可读性不能丢。在最后一个运行框，我已经做了这样的探索。不过换汤不换药，还是来来回回在scrolltop... [阅读全文]

浅谈javascript如何获取文件后缀名

在上传文件时，常常要对文件的类型即对文件的后缀名进行判断，用javascript可以很容易的做到这一点。用javascript解析一个带绝对路径的文件名并得到后... [阅读全文]

使用JavaScript和MQTT开发物联网应用示例解析

如果说java和c#哪个是最好的开发语言，无疑会挑起程序员之间的相互怒怼，那如果说javascript是动态性最好的语言，相信大家都不会有太大的争议。随着越来越... [阅读全文]

JavaScript代码模拟鼠标自动点击事件示例

利用javascript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后，javascript代码会自动去点击下一个按钮，一直点击到按钮5才会停止（... [阅读全文]

javascript解析json格式的数据方法详解

json （javascript object notation）是一种简单的数据格式，比xml更轻巧。它是 javascript 原生格式，这意味着在 ja... [阅读全文]

javascript前端和后台进行数据交互方法示例

在开发中遇到了在没有jquery的情况下需要与后台进行部分数据的交互，查找了部分资料使用javascript实现了操作，记录一下。//获取xmlhttprequ... [阅读全文]

使用纯前端JavaScript实现Excel导入导出方法过程详解

公司最近要为某国企做一个**统计和管理系统，具体要求包含excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果... [阅读全文]

微信小程序完美解决scroll-view高度自适应问题的方法

第一种情况，scroll-view占据整屏scroll-view { height: 100vh;}第二种情况，scroll-view自适应页面剩余高度xml文... [阅读全文]

js利用iframe实现选项卡效果

本文实例为大家分享了js利用iframe实现选项卡的具体代码，供大家参考，具体内容如下<!doctype html><html> <... [阅读全文]


验证码：

验证码：

jquery 实现斜导航效果

2019年07月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论