zoukankan
html css js c++ java
腾讯体育轮换tab菜单
没什么技术含量,看到了只想用源生的js来实现一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>腾讯体育轮换tab菜单 - 豪情</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font:12px/1.5 arial;background: #141e38;} ul,li{list-style: none;} .demo{ 320px;margin: 0 auto;padding-top: 80px;} a{color: #fff;text-decoration: none;} a:hover{color: #ff0;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} .title{height: 33px;line-height: 28px;overflow: hidden;} .nav a{float: left;font-size: 14px;font-weight: bold;height: 28px; 87px;text-align: center;margin-right: 5px;display: inline;background: #333131;color: #fff;} .nav a.on{height: 33px;color: #ABD4FF;background: url(//images0.cnblogs.com/blog/100150/201304/07233652-68f62c0b28e2476b90520b72044f7a26.gif) 0 0 no-repeat;} .content{ 314px;padding-top: 10px;} .list li{float: left; 145px;margin: 0 10px 10px 0;text-align: center;display: inline;color: #fff;} </style> </head> <body> <section class="demo"> <div class="title"> <nav id="nav" class="nav clearfix"> <a class="on" href="javascript:void(0)">美图速递</a> <a href="javascript:void(0)">经典回眸</a> </nav> </div> <div id="content" class="content"> <ul class="list"> <li><a target="_blank" href="#"><img alt="卡戴珊孕期着装PK王妃" src="http://img1.gtimg.com/sports/pics/hv1/48/120/1298/84433098.jpg" /><br /> 卡戴珊孕期着装PK王妃</a></li> <li><a target="_blank" href="#"><img alt="阿Sa跳水真人秀亮相" src="http://img1.gtimg.com/sports/pics/hv1/49/120/1298/84433099.jpg" /><br /> 阿Sa跳水真人秀亮相</a></li> <li><a target="_blank" href="#"><img alt="车侑蓝亮相台球展卖萌" src="http://img1.gtimg.com/sports/pics/hv1/51/120/1298/84433101.jpg" /><br /> 车侑蓝亮相台球展卖萌</a></li> <li><a target="_blank" href="#"><img alt="UFC女郎变美国啦啦队长" src="http://img1.gtimg.com/sports/pics/hv1/54/120/1298/84433104.jpg" /><br /> UFC女郎变美国啦啦队长</a></li> <li><a target="_blank" href="#"><img src="http://img1.gtimg.com/sports/pics/hv1/124/67/1297/84354634.jpg" alt="" /><br /> 200J肥男减肥后逆袭女神</a></li> <li><a target="_blank" href="#" rel="nofollow"><img title="" src="http://img1.gtimg.com/sports/pics/hv1/98/214/1277/83091593.jpg" alt="" /><br />巧祛狐臭,远离尴尬(图)</a></li> </ul> <ul class="list none"> <li><a target="_blank" href="#"><img alt="王心凌为棒球赛开球" src="http://img1.gtimg.com/sports/pics/hv1/198/23/1298/84408513.jpg" /><br /> 王心凌为棒球赛开球</a></li> <li><a target="_blank" href="#"><img alt="威廉王子夫妇秀球技" src="http://img1.gtimg.com/sports/pics/hv1/199/23/1298/84408514.jpg" /><br /> 威廉王子夫妇秀球技</a></li> <li><a target="_blank" href="#"><img alt="美女健身教练秀身姿" src="http://img1.gtimg.com/sports/pics/hv1/200/23/1298/84408515.jpg" /><br /> 美女健身教练秀身姿</a></li> <li><a target="_blank" href="#"><img alt="NBA悍将与女友出街" src="http://img1.gtimg.com/sports/pics/hv1/201/23/1298/84408516.jpg" /><br /> NBA悍将与女友出街</a></li> <li><a target="_blank" href="#"><img alt="莫布里环保活动左拥右抱" src="http://img1.gtimg.com/sports/pics/hv1/50/120/1298/84433100.jpg" /><br /> 莫布里环保活动左拥右抱</a></li> <li><a target="_blank" href="#" rel="nofollow"><img src="http://img1.gtimg.com/sports/pics/hv1/217/192/1173/76323502.jpg" alt="" /><br />喝酒“千杯不醉”有秘诀</a></li> </ul> </div> </section> <script type="text/javascript"> (function(window){ var oNav = document.getElementById('nav'); var aAnchors = oNav.getElementsByTagName('a'); var oContent = document.getElementById('content'); var aUl = oContent.getElementsByTagName('ul'); var timer = null; var num = 0; function auto(){ timer = setInterval(function(){ if(num >= aAnchors.length){ num = 0; } play(num); num ++; }, 2000); } auto(); function play(v){ for(var i = 0; i < aAnchors.length; i++){ aAnchors[i].className = ''; aUl[i].style.display = 'none'; } aAnchors[v].className = 'on'; aUl[v].style.display = 'block'; } for(var i = 0; i < aAnchors.length; i++){ aAnchors[i].index = i; aAnchors[i].onmouseover = function(){ clearInterval(timer); play(this.index); } aAnchors[i].onmouseout = function(){ timer = setTimeout(function(){ play(0); auto(); }, 500); } aUl[i].onmouseover = function(){ clearInterval(timer); } aUl[i].onmouseout = function(){ timer = setTimeout(function(){ play(0); auto(); }, 500); } } }(window)); </script></body> </html>
运行代码
查看全文
相关阅读:
上涨、下跌、震荡,我只做下跌 (有钱人赚钱太有心机!
股票操作指南
股票要素与心理学研究
时序图组成
软件描述的静态与动态
用dedecms做网站时,空间服务器选择IIS还是apache???
dedecms 图集标签{dede:productimagelist} {dede:field name='imgurls'}&nbs
dede内容页调用图片集下所有图片方法!
dede文章插入分页符不起作用,编辑器中出现分页符,导致文章显示不全
dede织梦怎么修改description的字数
原文地址:https://www.cnblogs.com/jikey/p/3006511.html
最新文章
一个有趣的算法题。。。
在AcGIS随着大数据的生成DEM
从xcode 6 上传 App Store
Excel一项研究指出色彩
Guest与virtio netdev交互模式
二维码简介和容错率的问题
做空
股市操作策略
三大做空工具详解
交割日效应
热门文章
股票交易的本质
挂单盯盘核心——从买盘和卖盘看庄家意图
盯盘与挂单技巧
股票走势的影响要素
下午“2点半”为什么是最好的买股票时间?
股指期货的交割日般是每月哪一天
股指期货与融资融券做空机制有什么区别?
什么是期货?期货市场是如何运转的?
做空
股票状态与操作策略
Copyright © 2011-2022 走看看