把原先的div display:none 该变让他显示或者直接写入个div 位置就是当前鼠标的位置 也可以 这个比较好用 。
很多时候我们需要提供这样的功能给访问者 当访问者点击页面中的缩略图时 其对应的全尺寸将显示在一个新的d出窗口中供访问者查看
实现此功能的最简单作法是用以下HTML代码创建一个图像链接 <a target= _blank ><img src= all jpg ></a> 其中<a>标记的href属性指定全尺寸的URL target属性设置为_blank指定在新窗口中显示该 <img>标记的src属性指定缩略图的URL
如果我们想对显示全尺寸的窗口的外观进行某些控制(比如希望d出窗口的高度 宽度能与全尺寸的大小匹配时) 则可调用 window open 方法 该方法接收三个参数 分别指定要打开文件的URL 窗口名及窗口特性 在窗口特性参数中可指定窗口的高度 宽度 是否显示菜单栏 工具栏等 以下代码将显示全尺寸在一个没有工具栏 地址栏 状态栏 菜单栏 宽 高分别为 的窗口中 <a onClick= window open(this href height= width= toolbar=no location=no status=no menubar=no);return false ><img src= all jpg ></a>
这里就提出了个问题 如果所有全尺寸都具有统一的大小(比如都是 x ) 那么以上代码适用于所有的缩略链接(只是href属性指向的全尺寸文件不同) 但如果全尺寸的大小并不统一 还用以上代码则我们需要先取得每幅全尺寸的大小 然后在window open方法的窗口特性参数中一一设置height和width为正确的值 在数量较多的情况下 这显然效率太低了 那么是否有一劳永逸的方法 即让d出窗口能自动适应要显示的大小?通过研究 发现可以使用 DHTML 中的 Image 对象来达到我们的目的 Image 对象可动态装载指定的 通过读取其 width 和 height 属性即能获得装入的大小 以此来设置d出窗口的大小 即可实现自适应大小的d出窗口了 下面即是实现代码:
<script language= JavaScript type= text/JavaScript ><! var imgObj;function checkImg(theURL winName){// 对象是否已创建if (typeof(imgObj) == object ){// 是否已取得了图像的高度和宽度if ((imgObj width != ) && (imgObj height != ))// 根据取得的图像高度和宽度设置d出窗口的高度与宽度 并打开该窗口// 其中的增量 和 是设置的窗口边框与间的间隔量OpenFullSizeWindow(theURL winName width= + (imgObj width+ ) + height= + (imgObj height+ ));else// 因为通过 Image 对象动态装载 不可能立即得到的宽度和高度 所以每隔 毫秒重复调用检查setTimeout( checkImg( + theURL + + winName + ) )}}
function OpenFullSizeWindow(theURL winName features) {var aNewWin sBaseCmd;// d出窗口外观参数sBaseCmd = toolbar=no location=no status=no menubar=no scrollbars=no resizable=no ;// 调用是否来自 checkImg if (features == null || features == ){// 创建图像对象imgObj = new Image();// 设置图像源imgObj src = theURL;// 开始获取图像大小checkImg(theURL winName)}else{// 打开窗口aNewWin = window open(theURL winName sBaseCmd + features);// 聚焦窗口aNewWin focus();}}// ></script>
lishixinzhi/Article/program/Java/Javascript/201311/25347
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)