jQuery中文网
个人中心
JS仿2010世博会主页焦点flash
2017-06-01 00:00:00 发布
211 浏览
页面报错/反馈
已
收藏
点赞
提示：您可以先修改部分代码再运行
jquerycn.cn/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JS仿2010世博会主页焦点flash</title> <style type="text/css"> *{border:0;margin:0;border:0;list-style:none;} body{padding:20px;background:#eee;} .wrap{padding:4px;border:1px solid #ccc;background:#fff;float:left;} #focus_change{width:280px;height:350px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*整个框架大小，可随意更改，可按需要是否加边框*/ #loading{position:absolute;z-index:9999;width:280px;height:350px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;} #ts_bg{position:absolute;bottom:0;z-index:1;width:280px;height:36px;background:#000;filter:alpha(opacity=50);opacity:0.5;} #pics li{position:absolute;top:0px;left:0px;} #pics li img{filter:alpha(opacity=0);opacity:0;width:280px;height:350px;}/*图片大小与框架保持一致*/ #ts li{position:absolute;z-index:2;left:0;bottom:-32px;width:100%;height:32px;line-height:32px;overflow:hidden;text-align:center;font-size:14px;font-weight:bold;} #ts li a{color:#fff; text-decoration:none;}/*标题链接样式*/ #btn,#btn_bg{position:absolute;z-index:3;bottom:40px;right:0px;color:#fff;font-size:12px;} #btn li,#btn_bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:4px;border:1px solid #999;} #btn_bg li{background:#000;filter:alpha(opacity=60);opacity:0.6;} #btn li.current {border:1px solid #F60;color:#F60;} </style> <script type="text/javascript"> /*design by koen @ 10nian5yue8ri*/ /*http://hi.baidu.com/koen_li*/ function $(id) {return document.getElementById(id);} function $$(tag,id){return (id==undefined?document:this.$(id)).getElementsByTagName(tag);} function poptit(tsID,n){//文字上下运动函数 var ts = $$('li',tsID); var setway=function(obj,y){obj.style.bottom=y 'px';} var getway=function(obj){return parseInt(obj.style.bottom);} var up=function(){ if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击 if (y1 == 0) return true; y1 =Math.ceil((0 - y1) / 5); setway(ts[n],y1); if(y1<0) ts[n].movement = setTimeout(up, 1); } var down=function(){ if (ts[N].movement) clearTimeout(ts[N].movement); if (y2 == -32) return true; y2 =Math.floor((-32 - y2) / 5); setway(ts[N],y2); if(y2>-32) ts[N].movement = setTimeout(down, 1); } for(var i=0;i<ts.length;i ){ if (!ts[i].style.bottom) ts[i].style.bottom = "-32px"; if(ts[i].name=='up') var N=i; } if(!N&&n==0) {//开始载入... ts[n].name='up'; var y1=getway(ts[n]); up(); return true; } if(N==n) return true;//防止快速移出移入的抖动 ts[N].name=''//标记淡入的name为空 ts[n].name='up'; var y1=getway(ts[n]); var y2=getway(ts[N]); down(); up(); } function opa(pics,n){//图片淡入淡出函数 var pics = $$('img',pics); var setfade=function(obj,o){ if (document.all) obj.style.filter = "alpha(opacity=" o ")"; else obj.style.opacity = (o / 100); }; var getfade=function(obj){ return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false); } var show=function(){ if(pics[n].move) clearTimeout(pics[n].move); if (o1 == 100) return true; o1 =5; setfade(pics[n],o1); if(o1<100) pics[n].move=setTimeout(show,1); }; var hide=function(){ if(pics[N].move) clearTimeout(pics[N].move); if (o2 == 0) return true; o2-=5; setfade(pics[N],o2); if(o2>0) pics[N].move=setTimeout(hide,1); }; for(var i=0;i<pics.length;i ){ if(!getfade(pics[i])) setfade(pics[i],0); if(pics[i].name=='out') var N=i; } if(!N&&n==0) {//开始载入... pics[n].name='out'; var o1=getfade(pics[n]); show(); return true; } if(N==n) return true; pics[N].name='' pics[n].name='out'; var o1=getfade(pics[n]); var o2=getfade(pics[N]); hide(); show(); } function classNormal() {//数字标签样式清除 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i ) { focusBtnList[i].className = ''; } } function autoFocusChange() {//自动运行 if (atuokey) return; var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i ) { if (focusBtnList[i].className == 'current') { var currentNum = i; } } if(currentNum<focusBtnList.length-1){ poptit('ts',currentNum 1); opa('pics',currentNum 1); classNormal(); focusBtnList[currentNum 1].className = 'current'; }else if(currentNum==focusBtnList.length-1){ poptit('ts',0); opa('pics',0); classNormal(); focusBtnList[0].className = 'current'; } } function focusChange() {//交互切换 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i ) { focusBtnList[i].I=i; focusBtnList[i].onclick = function(){ poptit('ts',this.I); opa('pics',this.I); classNormal(); focusBtnList[this.I].className = 'current'; } focusBtnList[i].onmouseover = function(){ this.style.backgroundColor='#f60'; this.style.cursor='pointer'; } focusBtnList[i].onmouseout = function(){ this.style.backgroundColor=''; } } } var atuokey = ''; function init(){//初始化 $('btn_bg').innerHTML=$('btn').innerHTML; $('focus_change').removeChild($$('div','focus_change')[0]); poptit('ts',0); opa('pics',0); classNormal(); $$('li','btn')[0].className = 'current'; $('focus_change').onmouseover = function() { atuokey = true; clearInterval(auto); } $('focus_change').onmouseout = function() { atuokey = false; auto=setInterval('autoFocusChange()', T); } } var T=3000;//每帧图片停留的时间，1000=1秒 var auto=''; window.onload=function(){ init(); focusChange(); auto=setInterval('autoFocusChange()', T); } </script> <p class="wrap"> </p><div id="focus_change"> <div id="loading">请稍候... <p id="ts_bg">文字标题的背景</p> <p id="btn_bg">数字标签的背景</p> <p id="pics"> </p><ul> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/8/3/1474653919_2644.jpg" alt="更多精彩内容请进入我的空间^_^"></li> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/c/4/1474653919_5815.jpg" alt="更多精彩内容请进入我的空间^_^"></li> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/b/9/1474653919_5191.jpg" alt="更多精彩内容请进入我的空间^_^"></li> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/4/3/1474653919_8925.jpg" alt="更多精彩内容请进入我的空间^_^"></li> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/1/a/1474653920_4248.jpg" alt="更多精彩内容请进入我的空间^_^"></li> <li><img src="//cutimg.erlo.vip/curl/?src=http://p1.jquerycn.cn/111cn/b/9/1474653920_6904.jpg" alt="更多精彩内容请进入我的空间^_^"></li> </ul> <p id="ts"> </p><ul> <li>使用简单，只需修改html内容和样式</li> <li>自定义框架(图片)大小，标题当然也可调</li> <li>也可以添加更多的帧/图片，无需修改JS代码</li> <li>怎样，使用是不是太简单了？</li> <li>欢迎提出批评、建议、改进</li> <li>欢迎围观、学习、模仿</li> </ul> <p id="btn"> </p><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div>
提示：您可以先修改部分代码再运行
您可能感兴趣的文章：
登录
查看全部
参与评论
昵称
登录
发布评论
评论留言
还没有评论留言，赶紧来抢楼吧~~
手机查看
返回顶部
给这篇文章打个标签吧~
棒极了
糟糕透顶
好文章
PHP
JAVA
JS
小程序
Python
SEO
MySql
确认
