网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
[淘宝网首页]仿淘宝网图片预览效果
[淘宝网首页]仿淘宝网图片预览效果
发布时间:2019-05-19
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
仿淘宝网图片预览效果
<script language="javascript" type="text/javascript"> var maxWidth=250; var maxHeight=250; function getPosXY(a,offset) { var p=offset?offset.slice(0):[0,0],tn; while(a) { tn=a.tagName.toUpperCase(); if(tn=="IMG") { a=a.offsetParent;continue; } p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0); p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0); if(tn=="BODY") break; a=a.offsetParent; } return p; } function checkComplete() { if(checkComplete.__img&&checkComplete.__img.complete) checkComplete.__onload(); } checkComplete.__onload=function() { clearInterval(checkComplete.__timeId); var w=checkComplete.__img.width; var h=checkComplete.__img.height; if(w>=h&&w>maxWidth) { previewImage.style.width=maxWidth+"px"; } else if(h>=w&&h>maxHeight) { previewImage.style.height=maxHeight+"px"; } else { previewImage.style.width=previewImage.style.height=""; } previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null; } function showPreview(e) { hidePreview (e); previewFrom=e.target||e.srcElement; previewImage.src=loadingImg;//More:www.codefans.net previewImage.style.width=previewImage.style.height=""; previewTimeoutId=setTimeout("_showPreview()",500); checkComplete.__img=null; } function hidePreview(e) { if(e) { var toElement=e.relatedTarget||e.toElement; while(toElement) { if(toElement.id=="PreviewBox") return; toElement=toElement.parentNode; } } try { clearInterval(checkComplete.__timeId); checkComplete.__img=null; previewImage.src=null; } catch(e) {} clearTimeout(previewTimeoutId); previewBox.style.display="none"; } function _showPreview() { checkComplete.__img=new Image(); if(previewFrom.tagName.toUpperCase()=="A") previewFrom=previewFrom.getElementsByTagName("img")[0]; var largeSrc=previewFrom.getAttribute("large-src"); var picLink=previewFrom.getAttribute("pic-link"); if(!largeSrc) return; else { checkComplete.__img.src=largeSrc; checkComplete.href=picLink; checkComplete.__timeId=setInterval("checkComplete()",20); var pos=getPosXY(previewFrom,[106,26]); previewBox.style.left=pos[0]+"px"; previewBox.style.top=pos[1]+"px"; previewBox.style.display="block"; } } </script>
<script language="javascript" type="text/javascript"> var previewBox = document.getElementById("PreviewBox"); var previewImage = document.getElementById("PreviewImage"); var previewUrl = document.getElementById("previewUrl"); var previewFrom = null; var previewTimeoutId = null; var loadingImg = "/jscss/demoimg/loading.gif"; </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/28929/
上一篇:
【phpstudy】php 取得客户端IP地址代码
下一篇:
[asp.net core]asp.net DateTime 周一和周日的日期获取代码
相关推荐
[asp.net core]asp.net WinForm下ComboBox设定SelectedValue
settimeout用法_setTimeout 和 setInterval 区别详解
php重定向和页面跳转|PHP重定向和页面快速转向
【asp.net core】asp.net处理datetime为空的字段
【phpstudy】php 获取客户浏览器与操作系统类型
csrf-token_C# 函数与函数重载
[python第一个元素]python第一天 欢迎来到python
phpstudy|php 写入和读取文件函数
phpstudy_php 截取一定长度的字符串(该函数对GB2312使用有效
【phpstudy】php 取得客户端IP地址代码
网友关注
收集者|收集了几款常用php日期操作
【asp.net core】asp.net C#给ListBox的双击事件二种方法
phpstudy_php 获得当前的脚本网址和相对路径转化成绝对路径正则
jquery ajax|jquery select操作代码
【phpstudy】php 正则html表格数组保存csv与转换数组代码
asp.net core|asp.net 水晶报表图标不显示的解决方法
【asp.net core】asp.net 检查文件夹和文件是否存在
【php去除重复数据】php去除重复单词与取得所有链接 正则代码
【mysql存储过程写法】mysql存储过程创建与注意事项
【jquery ajax】jquery formvalidator邮箱地址验证
热门标签
下载淘宝网
淘宝网下载
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
[asp.net core]asp.net DateTime 周一和周日的日期获取代码
php常
[日期比较大小]C#日期时间大小与加减代码
php常
【asp.net core】asp.net sql存储过程分页代码
php常
asp.net core|asp.net 实现xml插入与删除节点信息代码
php常
【phpstudy】php 批量修改RAR文件注释代码
php常
[.net framework 4.0].net csv 文件的读取 代码
php常
csrf-token_C# 对象XML序列化二种实现代码
php常
【button控件的长度】Button控件的commandname、CommandArgument onclick、
php常
【php读取checkbox】php读取checkbox值几种方法
php常
asp.net把图片转换byte_asp.net把图片转换byte实现方法
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有