JavaScript模仿网易标签制作代码

如果你的页面只有一个标签可以切换，你需要调用js effect。如果你需要单独为它加载一个jQuery插件，那一定非常痛苦。很多情况下，jQuery特效并不是万能的，偶尔有一个原生的js效果是必须的。今天，我很无聊。我用js和jquery写了一个标签的效果，但是jquery只是用来更好的获取标签和修改样式。

先浏览渲染图吧~ ~

1.Javascript实现1。html布局

Div id=' box ' Div class=' Biao ti ' Span id=' Span _ Xinwen ' onmouseover=' xinshinwen()' class=' S1 ' news/Span id=' span _ tupian ' on mouseover='石现tupian ()' class=' S2 '图片/Span id=' Span _石军' on mouseover='石现石军()' class=' S3 '军事/Span/Div class='内荣' Div class=' info ' id=' Xinwen ' ullia href=' # # # ' News News News/a/Li lia href=' # # ' News News News News News News/a/Li lia href=' # # News News/a/Li lia href=' # # News News News/a/Li lia href=' # # News News News News/a/Li lia href=' # # News News News/a/Li lia href=' # #新闻/a/Li lia href=' # # # News News/a/Li lia href=' # # #新闻div class=' info ' id=' tupian ' ullia href=' # # ' picture picture picture picture/a/Li lia href=' # # ' picture picture picture picture/a/Li lia href=' # # ' picture picture picture/a/Li lia href=' # # # ' picture picture picture picture picture/a/Li lia href=' # # ' picture picture picture picture/a/Li lia href=' # # # # ' picture picture picture picture picture picture/a/Li lia 图片图片图片图片图片/a/li lia href='### '图片图片图片图片图片图片/a/li lia href='## '图片图片图片图片图片图片图片/a/Li/ul/Div class=' info ' id='石军' ullia href=' # # '军事-军事-军事-军事-军事/a/li lia href='## '军事-军事-军事-军事/a/li lia href='### '军事-军事-军事-军事-军事-军事/a/li lia href='#'军事-军事-军事-军事-军事-军事-军事/a/li lia href='

2.css修改

样式类型=' text/CSS ' # box { height :600 px；边距-top : 100 px；左边距： 100像素；} #框biaoti{ font:16px/30px '宋体；高度： 30px宽度： 310 px边框-top:2px实心# 206F96文本对齐：中心；} #框彪体。S1 {宽度： 102像素；高度： 29px边框-左侧： 1px实心# CFCFCFCF右边框： 1px实心# CFCFCF向左浮动：} #框彪体。S2 {宽度： 102像素；高度： 29px右边框： 1px实心# CFCFCF边框-bottom: 1px实心# CFCFCF背景： URL(图片/1。jpg)repeat-x；向左浮动：} #框彪体。S3 {宽度： 102像素；高度： 29px右边框： 1px实心# CFCFCF边框-bottom: 1px实心# CFCFCF背景： URL(图片/1。jpg)repeat-x；向左浮动：} #框nei Rong ul { list-style : no；左填充left: 0px} #框nei Rong ul Li {行高： 30px左填充left: 0px} #框neirong ul li a:link，#box .内蒙古阿利：已访问{文本-装饰：无；color : # 666 font-size : 16px；} #tupian，#石军{ display: none} /style 3、js效果实现

脚本类型='text/javascript '函数仙师图面(){ //让图片内容显示出来文件。getelementbyid(' tupian ')。风格。display=' block//让新闻的内容隐藏文件。getelementbyid(' Xinwen ')。风格。显示='无'；//让军事的内容隐藏document.getElementById('石军').style.display=' none//让图片的背景隐藏文件。getelementbyid(' span _ tupian ')。风格。背景='无'；//让新闻的背景加上图片文件。getelementbyid(' span _ Xinwen ')。风格。背景=' URL(图像/1。jpg)repeat-x '；//让军事的背景加上图片文件。getelementbyid(' span _石军').风格。背景=' URL(图像/1。jpg)repeat-x '；//让图片的下划线隐藏文件。getelementbyid(' span _ tupian ')。风格。borderbottom=' none//让新闻的下划线加上文件。getelementbyid(' span _ Xinwen ')。风格。borderbottom=' 1px实心# CFCFCFcf '；//让军事的下划线加上文件。getelementbyid(' span _石军').风格。borderbottom=' 1px实心# CFCFCFCF '；}函数仙师俊石(){ //让军事内容显示出来document.getElementById('石军').style.display=' block//让新闻的内容隐藏文件。getelementbyid(' Xinwen ')。风格。显示='无'；//让图片的内容隐藏文件。getelementbyid(' tupian ')。风格。显示='无'；//让军事的背景隐藏文件。getelementbyid(' span _石军').style.background=' none//让新闻的背景加上图片文件。getelementbyid(' span _ Xinwen ')。风格。背景=' URL(图像/1。jpg)repeat-x '；//让图片的背景加上图片文件。getelementbyid(' span _ tupian ')。风格。背景=' URL(图像/1。jpg)repeat-x '；//让军事的下划线隐藏文件。getelementbyid(' span _石军').style.borderBottom=' none//让新闻的下划线加上文件。getelementbyid(' span _ Xinwen ')。风格。borderbottom=' 1px实心# CFCFCFcf '；//让图片下划线加上文件。getelementbyid(' span _ tupian ')。风格。borderbottom=' 1px实心# CFCFCFcf '；}函数仙诗新文(){ //让新闻内容显示出来文件。getelementbyid(' Xinwen ')。风格。display=' block//让图片的内容隐藏文件。getelementbyid(' tupian ')。风格。显示='无'；//让军事的内容隐藏document.getElementById('石军').style.display=' none//让新闻的背景隐藏文件。getelementbyid(' span _ Xinwen ')。风格。背景='无'；//让图片的背景加上图片文件。getelementbyid(' span _ tupian ')。风格。背景=' URL(图像/1。jpg)repeat-x '；//让军事的背景加上图片文件。getelementbyid(' span _石军').风格。背景=' URL(图像/1。jpg)repeat-x '；//让新闻的下划线隐藏文件。getelementbyid(' span _ Xinwen ')。风格。borderbottom=' none//让图片的下划线加上文件。getelementbyid(' span _ tupian ')。风格。borderbottom=' 1px实心# CFCFCFcf '；//让军事下划线加上文件。getelementbyid(' span _石军').风格。borderbottom=' 1px实心# CFCFCFCF '；}/脚本射流研究…写起来其实很简单，最重要的目的就是修改样式和制作动画。

二、jquery实现1、html布局

Div class=' box ' Div class=' title ' button class=' btnbtn-news ' news/button class=' BTN BTN-pic '图片/button button class='btn btn-aff '军事/按钮/Div class=' contents ' Div class=' info ' id=' news ' ullia href=' # ' news news news news/a/Li lia href=' # ' news news news news news news/a/Li lia href=' # News News News News/a/Li lia href=' # ' News News News News/a/Li lia href=' # ' News News News News News News/a/Li lia href=' # News News News News News/a/Li lia href=' # ' News News News News News News News/a/Li lia href=' # ' News News News News News News News News News/a/Li lia href=' # ' News News News News News News News News News News News/a/Li/ul div class=' info ' id=' pictures ' ullia href=' # ' picture picture picture picture/a/Li lia href=' # ' picture picture picture picture/a/Li lia href=' # ' picture picture picture picture picture/a/Li lia a href=' # '图片图片图片图片/a/Li lia a href=' # '图片图片图片图片/a/Li lia a href=' # '图片图片图片图片/a/Li lia a href=' # '图片图片图片图片图片图片图片/a/Li lia a href=' # '图片图片图片图片/a/Li lia a href=' # '图片图片图片图片图片图片/a/Li lia a href=' # '图片图片图片图片图片/a/Li lia a/Li lia a href=' # '图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片/a/Li lia a/Li lia a 军事军事军事军事军事军事军事军事军事军事军事军事军事军事军事军事军事军事军事

正文{ margin:0pxpadding:0px} Li { list-style : none；} a { text-decoration : none；}按钮{ border:none}输入、按钮、选择、textarea { outline:none} .box { height:600px边距-top : 100 px；左边距： 100像素；} .title { font :16 px/30px }；height: 30px宽度： 306 px；border-top:2px实心# 206F96} .标题。btn { width:102px高度： 29px；font-size : 16px；} .标题。BTN-news { border-left : 1px solid # CFCFCF；border-right: 1px实心# CFCFCF向左浮动：背景# fff} .标题。btn-pic{ border-right: 1px实心# CFCFCF边框-bottom: 1px实心# CFCFCF背景： url(./images/1 . jpg)repeat-x；向左浮动：} .标题。btn-aff{ border-right: 1px实心# CFCFCF边框-bottom: 1px实心# CFCFCF背景： url(./images/1 . jpg)repeat-x；向左浮动：} .内容ul { padding-left :10 px；} .内容ul Li Li { line-height :29 px；} .内容ul阿利{ color: # 666} .内容ul li:hover，内容ul li:已访问。内容ul li a:hover，内容ul阿利：已访问{ color: # 68a3ff} #图片，#事件{ display: none} 3.js实现

/** *由lxq于2016年10月3日创建。*/$(文档)。ready(function(){ $(')).标题BTN-图' .单击(函数(){ $('#pictures ')).CSS({ ' display ' : ' block ' })；$(“# news”).CSS({ ' display ' : ' none ' })；$('#affairs ').CSS({ ' display ' : ' none ' })；$('.BTN-皮克' .css({ '边框-底部' : '无','背景-图像' : '无' });$('.BTN-新闻').CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；$('.BTN-阿夫' .CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；});$('.标题BTN .click(function(){ $('#affairs ')).CSS({ ' display ' : ' block ' })；$(“# news”).CSS({ ' display ' : ' none ' })；$(' #图片').CSS({ ' display ' : ' none ' })；$('.BTN-阿夫' .css({ '边框-底部' : '无','背景-图像' : '无' });$('.BTN-皮克' .CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；$('.BTN-新闻').CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；});$('.标题BTN新闻网.单击(函数(){ $('#news ')).CSS({ ' display ' : ' block ' })；$('#affairs ').CSS({ ' display ' : ' none ' })；$(' #图片').CSS({ ' display ' : ' none ' })；$('.BTN-新闻').css({ '边框-底部' : '无','背景-图像' : '无' });$('.BTN-皮克' .CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；$('.BTN-阿夫' .CSS({ '边框-底部' : ' 1px实心# CFCFCFCF '，'背景-图像' : ' URL(images/1。jpg)' })；});});使用jquery最大的好处就是在获取标签的时候很方便，直接通过$和班级名或者编号名就直接获取。

以上就是本文的全部内容，希望对大家有所帮助，希望大家继续关注我们的最新内容。