|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#focus_m{position:relative; width:420px; height:384px; background:#133775}.f_img_roll{width:350px; height:300px; position:relative;}.f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}.f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}.f_img_tree div{position:absolute; z-index:300; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}.f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}.f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}.f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}.f_con{color:#fff; height:70px;}.f_con .title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}.f_con .title a:link, .f_con .title a:visited{color:#fff; text-decoration:none}.f_con .title a:hover{text-decoration:underline}.f_con .con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}</style><script type="text/javascript">function $A(iterable) {var results = [];for (var i = 0; i < iterable.length; i++)results.push(iterable);return results;}Function.prototype.bind = function() {var __method = this, args = $A(arguments), object = args.shift();return function() {return __method.apply(object, args.concat($A(arguments)));}}var imgs = [{max:'http://www.kuanghong.com/han/images/img_1.jpg', min:'http://www.kuanghong.com/han/images/img_1s.jpg', [url='#']url:'#'[/url], title:'标题01标题01标题01标题01标题01', con:'内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01'},{max:'http://www.kuanghong.com/han/images/img_2.jpg', min:'http://www.kuanghong.com/han/images/img_2s.jpg', [url='#']url:'#'[/url], title:'标题02标题02标题02标题02标题02', con:'内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02'},{max:'http://www.kuanghong.com/han/images/img_3.jpg', min:'http://www.kuanghong.com/han/images/img_3s.jpg', [url='#']url:'#'[/url], title:'标题03标题03标题03标题03标题03', con:'内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03'},{max:'http://www.kuanghong.com/han/images/img_4.jpg', min:'http://www.kuanghong.com/han/images/img_4s.jpg', [url='#']url:'#'[/url], title:'标题04标题04标题04标题04标题04', con:'内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04'},{max:'http://www.kuanghong.com/han/images/img_5.jpg', min:'http://www.kuanghong.com/han/images/img_5s.jpg', [url='#']url:'#'[/url], title:'标题05标题05标题05标题05标题05', con:'内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05'},{max:'http://www.kuanghong.com/han/images/img_6.jpg', min:'http://www.kuanghong.com/han/images/img_6s.jpg', [url='#']url:'#'[/url], title:'标题06标题06标题06标题06标题06', con:'内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06'}];function Focus(){ this.initialize.apply(this, arguments) };Focus.prototype = {initialize: function(imgObj, focus, tim, speed){this.imgs= imgObj;this.tim= tim*1000||2000;this.speed= speed||0.3;this.img_m= null;// 大图this.img_m2= null;// 大图2this.lis= [];// 小图列表this.mask= null;// 蒙板this.title= null; // 标题this.con= null;// 内容this.cur= 0;// 当前位置this.t= null; // 整体计时this.tm= null;// mask位置this.ti= null;// img 切换this.stoped= true;// 停止状态this.tem= 0;// 临时数据this.loaded= {imgs:[], num:0};// 加载进度this.getElement(document.getElementById(focus));this.preload();},preload: function(){for(var i=0; i<this.imgs.length; i++){this.loaded.imgs= new Image();this.loaded.imgs.onload= this.load_num.bind(this);this.loaded.imgs.src= this.imgs.max;}},load_num: function(){this.loaded.num++;if(this.loaded.num == this.imgs.length)this.start();},getElement: function(focus){ // 获得蒙板，小图列表，标题/内容容器等。。。var ds = focus.getElementsByTagName('div');for(var i=0; i<ds.length; i++)switch(ds.className){ case 'f_img_roll': this.img_m = document.createElement('img'); this.img_m2 = document.createElement('img'); this.img_m.src = this.imgs[0].max; this.img_m.style.zIndex = 101; this.img_m2.style.zIndex= 100; ds.onmouseover = this.stop.bind(this); ds.onmouseout = this.start.bind(this); ds.appendChild(this.img_m); ds.appendChild(this.img_m2); case 'f_img_tree': this.mask = document.createElement('div'); this.mask.onmouseover = this.stop.bind(this); this.mask.onmouseout = this.start.bind(this); var ul = document.createElement('ul'); var oThis = this; for(var n=0; n<this.imgs.length; n++){ this.lis[n] = document.createElement('li'); this.lis[n].n = n; this.lis[n].innerHTML= '<img src="'+this.imgs[n].min+'" />'; this.lis[n].onmouseover= function(){ this.style.border = "1px solid #cc0000"; } this.lis[n].onmouseout= function(){ this.style.border = "1px solid #0066cc"; } this.lis[n].onclick = function(){ if(oThis.lis[oThis.cur]!= this) oThis.nextFrame.call(oThis, this.n); } ul.appendChild(this.lis[n]); }; ds.appendChild (this.mask); ds.appendChild (ul); break; case 'title': this.title = ds; this.title.innerHTML = this.imgs[0].title; this.title.parentNode.onmouseover= this.stop.bind(this); this.title.parentNode.onmouseout= this.start.bind(this); break; case 'con': this.con = ds; this.con.innerHTML = this.imgs[0].con; break;}},nextFrame: function(n){if(this.t)clearTimeout(this.t);if(this.tm)clearInterval(this.tm);if(this.ti)clearInterval(this.ti);if(n)this.cur = n-1;var top = 0, posTo = 0;if(n!=0 && this.imgs[this.cur+1]){posTo = this.lis[this.cur+1].offsetTop;this.cur = this.cur+1;}else{posTo = this.lis[0].offsetTop;this.cur = 0;}this.tem = this.mask.offsetTop;this.tem > posTo? top = 1 : top = 0;this.tm = setInterval(this.moveTo.bind(this, top, posTo), 25);},moveTo: function(top, posTo){if(!top){if((this.tem+2) >= posTo+1){ clearInterval(this.tm); this.mask.style.top = posTo+'px'; this.img_swap(); return;}this.tem += (posTo - this.tem) * this.speed}else{if((this.tem-2) <= posTo-1){ clearInterval(this.tm); this.mask.style.top = posTo+'px'; this.img_swap(); return;}this.tem -= (this.tem-posTo)*this.speed;}this.mask.style.top = this.tem+'px';},img_swap: function(){var t, b;if(this.img_m.style.zIndex > this.img_m2.style.zIndex){t = this.img_m;b = this.img_m2;}else{t = this.img_m2;b = this.img_m;}this.title.innerHTML= '<a href="'+this.imgs[this.cur].url+'">'+this.imgs[this.cur].title+'</a>';this.con.innerHTML= this.imgs[this.cur].con;b.src = this.imgs[this.cur].max;/MSIE/.test(navigator.userAgent) ? this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100: this.tem = t.style.opacity ? t.style.opacity*100 : 100;if(this.ti)clearInterval(this.ti);this.ti= setInterval(this.img_hid.bind(this, t, b), 25);},img_hid: function(t,b){this.tem -= 7;if (/MSIE/.test(navigator.userAgent))t.style.filter= 'alpha(opacity='+this.tem+')';elset.style.opacity = this.tem/100;if(this.tem <=0){clearInterval(this.ti);var tz= t.style.zIndex;var bz= b.style.zIndex;t.style.zIndex= bzb.style.zIndex= tz;if (/MSIE/.test(navigator.userAgent)) t.style.filter= 'alpha(opacity=100)';else t.style.opacity= 1;if(this.stoped) return;this.start(); // 继续循环}},start: function(){if(this.t) clearTimeout(this.t);this.t= setTimeout(this.nextFrame.bind(this, null), this.tim);this.stoped = false;},stop: function(){clearTimeout(this.t);this.stoped = true;}}window.onload = function(){var focus = new Focus(imgs,'focus_m');//focus.start();}</script></head><body><div id="focus_m"><div class="f_img_roll"></div><div class="f_img_tree"></div><div class="f_con"><div class="title"></div><div class="con"></div></div></div></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡