常春藤主页  新闻  生活  图片  起航  博客  电台  科大123导航
  
首页 ┊ 校园风光 ┊ 科大纪实 ┊ 生态景致 ┊ 青春画廊 ┊ 大千世界 ┊ 地方风情 ┊ 摄手博客 ┊ 玩转摄影
/*-----实现阴影艺术字效果------- by 胡尊杰 -------fctText 文字内容 -------fctTop 文字在页面中距顶位置 -------fctLeft 文字在页面中距左位置 -------fctBold 阴影宽度 -------Color 文字颜色 -------bgColor 阴影颜色 -------FontSize 文字大小*/ if(typeof(pyzy)=='undefined'){ var pyzy={}; //起用封装方法名称,避免脚本命名污染 pyzy.$ = function(fctId) { return document.getElementById(fctId); }; } pyzy.ColorText=function(fctText,fctTop,fctLeft,fctBold,Color,bgColor,FontSize){ var varZBT=(fctTop-fctBold/2); var varZBL=(fctLeft-fctBold/2); var varWriteText=""; for(var i=1;i'+fctText+''; } } return varWriteText+'
'+fctText+'
'; } //CloseImgBox //图片盒子展示工具主要方法 by 胡尊杰 20091117 pyzy.MinImgsBox = { intImgId: 0, //默认图片ID arrImgs: [["图片名称", "大图路径", "小图路径"]], //图片数据 objMaxImgBoxObj: null, //大图片容器 objMinImgBoxObj: null, //小图片容器 objMinImgObj: null, //当前正在播放的小图的IMG对象,用于校对小图容器的滚动条位置等 objPlayRateObj: null, //播放进度对象 /* Init 索引方法: @ fctArrImgs 图片信息数据数组 参见 arrImgs 的格式*/ Init: function(fctArrImgs) { this.arrImgs = fctArrImgs; //将图片数据存储于变量中 this.objMaxImgBoxObj = pyzy.$("divPyzyImgBoxContent"); //将大图片容器存储于变量 this.objTxtBoxObj = pyzy.$("divPyzyImgBoxText"); //将大图片容器存储于变量 this.objMinImgBoxObj = pyzy.$("divPyzyMinImgs"); //将小图片容器存储于变量 this.objPlayRateObj = pyzy.$("divPyzyImgBoxRate"); //将播放进度对象存储于变量 var tmpMinImgsBoxHTML = []; //临时小图列表存储 for (var intI = 0; intI < this.arrImgs.length; intI++) { tmpMinImgsBoxHTML[tmpMinImgsBoxHTML.length] = "" + this.arrImgs[intI][0] + "" } this.objMinImgBoxObj.innerHTML = tmpMinImgsBoxHTML.join(""); //输出小图列表到容器 this.Show(0); //默认显示第一个图片 }, Show: function(fctId) { if (this.arrImgs.length == 0) { alert("缺少图片数据"); return; } //判断ID并矫正为正确编号 fctId = (fctId < 0 ? this.arrImgs.length - 1 : (fctId >= this.arrImgs.length ? 0 : fctId)); //播放进度 this.objPlayRateObj.title = "共[" + this.arrImgs.length + "]张图片,当前为第[" + (fctId+1) + "]张图片,播放进度为" + ((fctId + 1) / this.arrImgs.length * 100) + "%。"; this.objPlayRateObj.style.width = ((fctId + 1) / this.arrImgs.length * this.objPlayRateObj.parentNode.offsetWidth) + "px"; //取得当前播放图片的小图对象 this.objMinImgObj = pyzy.$("imgMinItem" + fctId) //调整小图片容器滚动条位置,使得当前图片在容器的中间 pyzy.MinImgsScroll.Init( this.objMinImgBoxObj, ( ( //先通过小图片对象的左边距与得出图片与容器左边的距离:因为IE环境下的元素边距是相对于父容器的、而火狐下是相对于窗体,所以这里用到了浏览器环境的判断 this.objMinImgObj.offsetLeft - (navigator.appVersion.indexOf("MSIE") == -1 ? this.objMinImgObj.parentNode.offsetLeft:0) ) - //减掉图片容器滚动条已经卷掉的相素,这样取到的是可以使小图片始终居于容器最左边的,所以接下来减掉容器一半的宽度 恰巧就可以使小图片居于容器中间 this.objMinImgBoxObj.scrollLeft - (this.objMinImgBoxObj.offsetWidth / 2) ) ); //输出图片名称到大图片容器 // this.objMaxImgBoxObj.innerHTML = pyzy.ColorText(this.arrImgs[fctId][0], 0, 0, 4, "#444;bottom:2px;right:10px", "#444;bottom:2px;right:10px", 12) + pyzy.ColorText(this.arrImgs[fctId][0], 2, 2, 4, "#666;bottom:2px;right:10px", "#fff;bottom:2px;right:10px", 12); //用当前大图片路径替掉大图片容器的背景 this.objMaxImgBoxObj.style.backgroundImage = "url(" + this.arrImgs[fctId][1] + ")"; this.objTxtBoxObj.innerHTML = this.arrImgs[fctId][0]; //取消先前的默认图片的选中状态 pyzy.$("imgMinItem" + this.intImgId).className = ""; //设置先前的默认图片为样式为选中状态 this.objMinImgObj.className = "Sel"; this.intImgId = fctId; } }; //滚动条控制方法 by 胡尊杰 20091117 pyzy.MinImgsScroll = { intAllScrollSeep: 0, //步长,单次滚动的幅度 intScrollCount: 0, //滚动长度记录 记录按象素滚动的长度与步长对比 用以实现动态滚动效果 objScroll: null, //要控制其滚动条的目标对象 boolLeft: true, //滚动条类型,默认为左右水平滚动条 /* Init 索引方法: @ (fctBoxObj) 要控制其滚动条的目标对象,必须指定 @ [fctSeep] 移动步长 按正负数控制左右滚动[不指定则默认为目标对象的宽度(如果是垂直则为其高度)] @ [fctTop] 滚动条类型 默认Left为左右水平滚动条,此参数指定任意值则为垂直滚动条 */ Init: function(fctObj, fctSeep, fctTop) { this.objScroll = fctObj; this.boolLeft = (fctTop == null); this.intAllScrollSeep = (fctSeep == null ? (this.boolLeft ? this.objScroll.offsetWidth : this.objScroll.offsetHeight) : fctSeep); //判断滚动步长值 如果为当前状态的反方向 则将滚动幅度取反 this.intSeep = ((this.intAllScrollSeep < 0 && this.intSeep > 0) || (this.intAllScrollSeep > 0 && this.intSeep < 0) ? -1 : 1) * this.intSeep; this.intScrollCount = 0; //初始化步长执行进度统计为0 this.AutoSeep(); }, intSeep: 5, //自动滚动时的幅度 默认为10象素 AutoSeep: function() { if (Math.abs(this.intAllScrollSeep) > Math.abs(this.intScrollCount)) { //是否已经完成滚动步长 this.intScrollCount += this.intSeep; if (this.boolLeft) { this.objScroll.scrollLeft += this.intSeep; } else { this.objScroll.scrollTop += this.intSeep; } window.setTimeout("pyzy.MinImgsScroll.AutoSeep();", 8); //8 毫秒后继续执行滚动,也可以更改此参数控制滚动时的速度 } } }; function CloseDiv(){ window.close(); }
您现在的位置:首页 > 青春画廊 > 信息内容
标题
上一个
下一个
左滚动
右滚动
测试图片名称
document.write(''); tanx_s = document.createElement("script"); tanx_s.type = "text/javascript"; tanx_s.charset = "gbk"; tanx_s.id = "tanx-s-mm_42581189_4012901_13068085"; tanx_s.async = true; tanx_s.src = "http://p.tanx.com/ex?i=mm_42581189_4012901_13068085"; tanx_h = document.getElementsByTagName("head")[0]; if(tanx_h)tanx_h.insertBefore(tanx_s,tanx_h.firstChild);
pyzy.MinImgsBox.Init([ /*["图片名称","大图路径","小图路径"]http://www.pyzy.net/Demo/js_css_div_img_box/*/ ["【冬·北】 作者 陈明辉", "uppic/20131216182743479.jpg", "uppic/20131216182743479.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182743449.jpg", "uppic/20131216182743449.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182743357.jpg", "uppic/20131216182743357.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742096.jpg", "uppic/20131216182742096.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742254.jpg", "uppic/20131216182742254.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742411.jpg", "uppic/20131216182742411.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742037.jpg", "uppic/20131216182742037.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742132.jpg", "uppic/20131216182742132.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182742758.jpg", "uppic/20131216182742758.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182741841.jpg", "uppic/20131216182741841.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182741998.jpg", "uppic/20131216182741998.jpg"] , ["【冬·北】 作者 陈明辉", "uppic/20131216182741156.jpg", "uppic/20131216182741156.jpg"] ]);
首页 - 关于我们 - 免责声明 - 科大主页 - 常春藤首页
Copyright © 2009 -2012 常春藤 http://pp.itust.cn,All Rights Reserved 津ICP备11001142号 津教备0011号 津科备26-2号
联系电话:022-60272068  传真:022-60273356 Email:jzt@tust.edu.cn