新浪tag式滑动门技术

最新推荐文章于 2023-04-27 18:49:30 发布
最新推荐文章于 2023-04-27 18:49:30 发布
阅读量635 收藏
点赞数
文章标签： menu border class float url div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panqingbiao/article/details/1748544
版权
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title><style type="text/css">
<!--
/*CSS for all begin*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img {margin:0; padding:0; border:0;}
td,p,div,li,select,input,textarea {font-size:12px;}
ul {list-style-type:none; text-align:left;}
select,input {vertical-align:middle;}
body { color:#333; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_011.gif) repeat-x;}
#wrap { width:750px; margin:0 auto; clear:both; background:#fff;}
.clearit { clear:both;}
a{ color:#039; text-decoration:underline;}
/*a:visited { color:#666; text-decoration:underline;}*/
a:hover{ color:#F00; text-decoration:underline;}
.linkN a{ color:#039; text-decoration:none;}
.linkN a:hover{ color:#F00; text-decoration:underline;}
.linkfff a{ color:#fff; text-decoration:none;}
.linkfff a:hover{ color:#F00; text-decoration:underline;}
.linkAD5A00 a { color:#AD5A00; text-decoration:none;}
.linkAD5A00 a:hover { color:#f00; text-decoration:underline;}
.linkC00 a { color:#C00; text-decoration:none;}
.linkC00 a:hover { color:#C00; text-decoration:underline;}
.link666 a { color:#666; text-decoration:none;}
.link666 a:hover { color:#F00; text-decoration:underline;}
h1 { font-size:16px; font-family:simhei; font-weight:500; text-align:center; padding:5px 0 3px 0;}
h2 { font-size:14px; color:#fff; display:block; clear:both; text-align:left;}
h3 { font-size:14px; font-weight:200; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_017.gif) no-repeat 2px 7px; border-bottom:2px solid #BBE5F1; padding:5px 0 2px 17px; margin:5px 0;}
span{ font-size:12px; font-weight:200; float:right; margin-right:5px;}
ul { margin:5px 0 0 5px; color:#039;}
li { padding:3px 0 3px 10px; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_010.gif) no-repeat 3px 7px;}
.noStyle li { padding:3px 0; background:none;}
ul.two { margin:8px 0 0 12px;}
.two li { padding:3px 0 3px 10px; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_010.gif) no-repeat 3px 7px; float:left; width:110px;}
.f14 li { font-size:14px; padding:1px 0 4px 10px;}
.blkT { margin-top:6px;}
.list14 { font-size:14px; line-height:23px;}
/*CSS for all end*/
/*CSS for 共用模块 end*/
/*CSS for main begin*/
.leW { width:254px;}
.miW { padding:0 5px;}
.riW { width:140px; background:#F3F3F3;}
.riW li { padding:3px 0 3px 6px; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_009.gif) no-repeat 0 7px;}
.cont_le { background:#EBF8FB; border:1px solid #A3D8E0; border-top:none; border-bottom:none; padding:8px 0 8px 0;}
.cont_all { background:#EBF8FB; border:1px solid #A3D8E0; border-top:none; padding:8px 0 8px 0;}
.text { padding:4px 0 8px 0; text-align:center;}
.pic { margin:8px 0; text-align:center;}
.textL { text-align:left; padding:3 0 8px 0;}
.blankT { margin-top:8px;}
.picfff { text-align:center;}
.picfff img { border:1px solid #fff; margin:5px 0;}
.partA .jdt { background:#D11C00; padding:5px 0 5px 0; text-align:left;}
.partA .cont_le p { float:left; margin:0 0 0 6px; text-align:center;}
.partA .miW .top { height:17px; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_014.gif) no-repeat; text-align:right; padding:5px 18px 0 0; margin-top:8px;}
.partA .miW .top a { color:#C00; text-decoration:underline;}
.partA .miW .top a:hover { color:#C00; text-decoration:none;}
.partA .miW .cont { background:#FFFBEA; border:1px solid #FC6; border-top:none; padding-bottom:5px; border-bottom:none;}
.partA .miW .cont p{ line-height:19px; margin-left:15px;}
.partA .miW .cont .line { background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_015.gif) repeat-x; height:1px; font-size:0; margin:5px 15px;}
.partA .miW .top1 { height:15px; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_016.gif) no-repeat; text-align:left; padding:4px 0 0 23px; margin-left:0; _margin-left:2px;}
.partA .miW .top1 h2 { color:#000;}
.partA .miW .cont1 { border:1px solid #FC6; border-top:none; padding:5px 0 8px 0;}
.partA .shiP { background:#E0E5F2 url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_013.gif) no-repeat bottom; width:120px; height:109px; border:1px solid #A0B2D8; margin:10px 0 0 9px;}
 /*标签*/
 .menu1Off,.menu1On,.menu2Off,.menu2On,.menu3Off,.menu3On,.menu4Off,.menu4On { height:20px; color:#039; text-align:center; background:#B2DBE1; cursor:pointer; padding-top:3px;}
 .menu1On,.menu2On,.menu3On,.menu4On{ color:#C00; background:#fff; border-left:1px solid #34AEBE; border-right:1px solid #34AEBE;}
 /*标签a*/
 .menua1Off,.menua1On,.menua2Off,.menua2On{ height:16px; width:52px; color:#666; text-align:center; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_020.gif) repeat-x; cursor:pointer; padding-top:3px;}
 .menua1On,.menua2On{ color:#C00; font-weight:bold; background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_019.gif) repeat-x; }
 .menuCont { background:#F3F3F3;}
 .menuCont th { text-align:center; font-weight:200; padding:5px 0 3px 0;}
 .menuCont .noBg td { background:#fff; padding:5px 0 3px 5px; border-right:1px solid #F3F3F3; }
 .menuCont .noBg1 td { background:#F3F3F3; padding:5px 0 3px 5px; border-right:1px solid #FFF;}
.partA .tuKu { background:url( http://image2.sina.com.cn/ty/yayun2006/idx061115img/yyh_lmy_022.gif) no-repeat; margin-left:5px; height:150px; text-align:center;}
.partA .tuKu p { float:left; margin:0 10px; _margin:0 8px;}
.partA .tuKu img { padding:5px; border:1px solid #D0D1D2; background:#fff; margin:8px 0;}
.partA .shiPyy { border:1px solid #FC6; margin-top:5px;}
.partA .shiPyy h2 { color:#C00; background:#FFEAAF; padding:5px 0 3px 5px;}
.partA .shiPyy img { vertical-align:middle;}
.adv { margin:8px 0;}
.leftW { width:605px; padding-right:5px; text-align:center;}
.leftW .leW { width:140px;}
.leftW .leW img { margin-bottom:8px;}
.leftW .leW p { text-align:left; line-height:19px; padding:0 5px; margin-top:5px;}
.leftW .leW .picText { text-align:left; line-height:19px; padding-right:5px; margin-bottom:8px;}
.leftW .leW .picText img { float:left; margin:0 7px;}
.midW { padding:5px 0 0 5px; text-align:left;}
.midW table { margin-bottom:8px;}
.midW td { line-height:19px; padding:3px 0px;}
.midW span { float:none; color:#929292;}
.midW .more span { float:right;}
.midW .cC00 { color:#C00; font-weight:bold;}
.rightW { width:140px; background:#F3F3F3;}
.rightW p { float:left; margin:5px 0 5px 8px; _margin:5px 0 5px 5px;}
.rightW .cont { text-align:left; line-height:19px; text-align:left; padding:8px 0 0 8px;}
.rightW .date { margin-top:8px;}
.rightW .date td { color:#666; padding:1px 0;}
.rightW .date td { background:#fff; padding:1px 0; color:#039;}
.rightW .date .cF60 { color:#F60; font-weight:bold;}
.rightW .fenX { margin-top:8px; margin-left:3px;}
.rightW .fenX td { padding:5px 0 2px 5px; background:#fff; text-align:left;}
.rightW .blk000 img { border:1px solid #000;}
/*CSS for main end*/
-->
</style>
</head>
<body οnlοad="change_Menu(1)">
<table width="254" cellspacing="0" class="partA">
 <tr><td class="leW" valign="top" width="254">
   
   <!-- d -->   <!-- d -->
   <!-- 舌签排行 begin -->
   <script language="JavaScript" type="text/javascript">
//<![CDATA[
var cur_index=1
var num=4 //该值记录标签的个数
var settime
function GetObj(objName){
 if(document.getElementById){
  return eval('document.getElementById("' + objName + '")');
 }else if(document.layers){
  return eval("document.layers['" + objName +"']");
 }else{
  return eval('document.all.' + objName);
 }
}
function change_Menu(index){
 for(var i=1;i<=num;i++){/* 最多支持8个标签 */
  if(GetObj("con"+i)&&GetObj("m"+i)){
   GetObj("con"+i).style.display = 'none';
   GetObj("m"+i).className = "menu"+i+"Off";
  }
 }
 if(GetObj("con"+index)&&GetObj("m"+index)){
  GetObj("con"+index).style.display = 'block';
  GetObj("m"+index).className = "menu"+index+"On";
 }
 cur_index=index
 if(cur_index<num){
    cur_index++
   }
 else{
     cur_index=1
   }
 settime=setTimeout("change_Menu(cur_index)",2000)//设置延迟时间
  
}
function Menu(c_index){
  clearTimeout(settime)
  change_Menu(c_index)
 }   
  
//]]>
</script>
<table cellspacing="0" style="background:#3FA6B5; width:100%;" class="clearit">
<tr><td height="3"></td></tr>
<tr><td style=" color:#fff; font-weight:bold; text-align:center;"><a href=http://yayun2006.sina.com.cn/video/index.shtml target=_blank style="color:#fff;">
 视频访谈</a></td>
 <td id="m1" onClick="Menu(1)" class="menu1On" title="明星">明星</td>
 <td width="1"></td>
 <td id="m2" onClick="Menu(2)" class="menu2Off" title="游泳">游泳</td>
 <td width="1"></td>
 <td id="m3" onClick="Menu(3)" class="menu3Off" title="特写">特写</td>
 <td width="1"></td>
 <td id="m4" onClick="Menu(4)" class="menu4Off" title="举重">举重</td>
 <td width="10"></td>
</tr>
</table>
<div id="con1" class="cont_le picfff">
 <p style=" margin-left:1px;"><a href=" http://sports.sina.com.cn/doha2006/z/doha2006/photo/36083/index.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1091DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/z/doha2006/photo/36083/index.shtml" target="_blank">
 游泳冠军做客</a>
 </p>
 <p><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/23122613020.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1094DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/23122613020.shtml" target="_blank">
 邻家男孩吴鹏</a>
 </p>
 <div class="clearit"></div>
</div>
<div id="con2" style="display:none;"  class="cont_le picfff">
  <p style=" margin-left:1px;"><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/23382613071.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1322DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/23382613071.shtml" target="_blank">
  蛙后齐晖</a>
 </p>
 <p><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/22502612978.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1323DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-05/22502612978.shtml" target="_blank">
 成熟周雅菲</a>
 </p>
 <div class="clearit"></div>
</div>
<div id="con3" style="display:none;" class="cont_le picfff">
  <p style=" margin-left:1px;"><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00582616492.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1324DT20061207054109.jpg" width="248" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00582616492.shtml" target="_blank">
  张国政与小浪亲密接触</a>
 </p>
 <div class="clearit"></div>
</div>
<div id="con4" style="display:none;" class="cont_le picfff">
  <p style=" margin-left:1px;"><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00502616482.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1325DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00502616482.shtml" target="_blank">
  丘乐公布择偶标准</a>
 </p>
 <p><a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00212616420.shtml" target="_blank"><img src=" http://image2.sina.com.cn/ty/up/2006-12-07/U347P6T64D26465F1326DT20061207054109.jpg" width="120" height="90" alt="" /></a><br />
  <a href=" http://sports.sina.com.cn/doha2006/o/bn/2006-12-07/00212616420.shtml" target="_blank">
 女子举重大姐大</a>
 </p>
 <div class="clearit"></div>
</div>
</body>
</html> 
panqingbiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个可滑动的标签布局TagLayout~（支持滑动，gravity，间距等配置）2
CSDN_JIUWANG的博客
08-11 222
额。。。对于未完成的想入非非的版本，总会想着尝试去做一下试试看不看能不能完成，所以又又又又又在前面的版本上改了。。。。但其实这里只是做了一些优化和我前面一直说的不支持排列方向的事。。。后面可能还会改。。至少现在的排列方向上逻辑还不够严谨（但是是没问题的），在考虑增加line属性，或许最后还会有一个类似的自定义view（FlowLayout），后话了。 效果图： gif好大，放不下，演示不了了，，，， 代码： package com.example.admin.view.view;...
JQUERY滑动门最简单代码
03-28
JQUERY滑动门最简单代码,在主文件里的代码仅仅就是6行 [removed] $(function(){ $("#tags_op div:not(:first)").hide(); $("#tags_op li").each(function(index){ $(this).mouseover( function(){ $("#tags_op...
vue实现tag 标签内容过长添加左右按钮进行滑动
cdd9527的博客
04-27 2071
vue实现tag 标签内容过长添加左右按钮进行滑动
tag 滚动变换
wang_long_989的专栏
01-21 286
/** * 产品详情页滚动 */ $(document).ready(function () { $(window).scroll(function () { var sectionArray = $('.cy-cp-intro-warp'); for(var i=0; isectionArray.length-1; i++){
实用：滑动门tag切换
weixin_30650859的博客
04-16 81
css: 1*{margin:0;padding:0;list-style:none;font-size:12px;}2a{text-decoration:none;color:#333;}3#wrap{position:relative;width:330px;height:220px;margin:20pxauto;}4#wrap.title{pos...
描述html实现自动切换,JS+CSS实现自动切换的网页滑动门菜单效果代码
weixin_29214691的博客
05-31 414
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码。分享给大家供大家参考。具体如下：这是一款支持自动切换功能的网页滑动门菜单，JS与CSS结合的技术成果，有人说它是自己会切换的网页选项卡标签面板，QQ登录后弹出的每日要闻迷你窗口中有类似效果，但是代码写法却是截然不同的，每一位作者的思路是不同的，因此您多了一份参考。运行效果截图如下：在线演示地址如下：具体代码如下：自动切换的网页滑动门菜...
蓝色拖动层+滑动门+滚动代码
weixin_33768481的博客
06-26 83
  &lt;html&gt;&lt;head&gt;&lt;title&gt;DRAG the DIV&lt;/title&gt;&lt;style&gt;*{font-size:12px}.dragTable{font-size:12px;border-top:1px solid #3366cc;margin-bottom: 10px;width:100%;background-color:#...
listview下拉刷新 上拉(滑动分页)加载更多
阳光灿烂的日子的博客
08-05 516
最 近做的类似于微博的项目中，有个Android功能要使用到listview的向下拉刷新来刷新最新消息，向上拉刷新（滑动分页）来加载更多。 新浪微博就是使用这种方式的典型。 当用户从网络上读取微博的时候，如果一下子全部加载用户未读的微博这将耗费比较长的时间，造成不好的用户体验，同时一屏的内容也不足以显示如此多的内容。这时候，我们就需要用到另一个功能，那就是listview的分页了，其实这个分页
NLP+词法系列（一）︱中文分词技术小结、几大分词引擎的介绍与比较
热门推荐
素质云笔记
11-25 4万+
笔者想说：觉得英文与中文分词有很大的区别，毕竟中文的表达方式跟英语有很大区别，而且语言组合形式丰富，如果把国外的内容强行搬过来用，不一样是最好的。所以这边看到有几家大牛都在中文分词以及NLP上越走越远。哈工大以及北大的张华平教授（NLPIR）的研究成果非常棒！ 但是商业应用的过程中存在的以下的问题： 1、是否先利用开源的分词平台进行分词后，再自己写一些算法进行未登录词、歧义词的识别？ 2、或
标记库,tag实例,java技术
10-30
在Java技术中，标记库通常以TLD（Tag Library Descriptor）文件的形式存在，这些文件描述了标签的行为、属性和事件处理。 标记库的使用大大提高了JSP页面的可维护性和可重用性，因为它们将业务逻辑和视图层分离。...
wordpress个性滑动的Tag标签特效
05-18
摘要:脚本资源,Ajax/JavaScript,wordpress,Tag,标签　wordpress个性滑动的Tag标签特效，鼠标放上后可看到效果，每一个标签都被修饰成这种样子，鼠标滑过时会伸展出内容，是不是很个性？使用WordPress构建博客系统的...
Google Tag Library技术文档资料
06-02
《Google Tag Library技术详解》 Google Tag Library是一个用于网站数据分析和优化的重要工具，它整合了各种Google服务的标记，如Google Analytics（分析）、AdWords、Optimize等，为开发者提供了一个方便的方式来...
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门
04-21
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门
chromedriver-mac-arm64_126.0.6465.0.zip
07-31
chromedriver-mac-arm64_126.0.6465.0.zip
chromedriver-mac-x64_122.0.6235.0.zip
最新发布
07-31
chromedriver-mac-x64_122.0.6235.0.zip
chromedriver-mac-x64_122.0.6188.0.zip
07-31
chromedriver-mac-x64_122.0.6188.0.zip
【JCR2区】基于matlab阿基米德算法优化最小二乘法AOA-LSSVM数据分类【含Matlab源码 6004期】.zip
07-31
CSDN海神之光上传的代码均可运行，亲测可用，换数据就行，适合小白； 1、代码压缩包内容 主函数：main.m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化最小二乘法支持向量机LSSVM分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化LSSVM 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化LSSVM 4.4.3 灰狼算法GWO/狼群算法WPA优化LSSVM 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化LSSVM 4.4.5 萤火虫算法FA/差分算法DE优化LSSVM 4.4.6 其他优化算法优化LSSVM
【JCR2区】基于matlab蚁狮算法优化最小二乘法ALO-LSSVM数据分类【含Matlab源码 6057期】.zip
07-31
CSDN海神之光上传的代码均可运行，亲测可用，换数据就行，适合小白； 1、代码压缩包内容 主函数：main.m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化最小二乘法支持向量机LSSVM分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化LSSVM 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化LSSVM 4.4.3 灰狼算法GWO/狼群算法WPA优化LSSVM 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化LSSVM 4.4.5 萤火虫算法FA/差分算法DE优化LSSVM 4.4.6 其他优化算法优化LSSVM
NFC Forum Type 3 Tag技术详解
NFC论坛是推动NFC技术发展和标准化的组织，发布了多种类型的NFC标签规范，其中Type 3 Tag是其中一个重要的标准。 NFC论坛的Type 3 Tag规范，即NFCForum-TS-Type-3-Tag_1.1，详细定义了Type 3标签的操作、功能和通信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值