网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
手机开发
>
手机软件
> >
[放大镜图片卡通]淘宝图片放大镜js代码
[放大镜图片卡通]淘宝图片放大镜js代码
发布时间:2018-12-06
【www.gdgbn.com--手机软件】
提示:您可以先修改部分代码再运行
<script type="text/javascript"> var $E = function(opts){ function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;} var beImg,expand,clip,cover,warp,expImg; var clipWidth,clipHeight; var closeTimeId = null; var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整 //init (function(){ beImg = _(opts.berviary); warp = beImg.parentNode; cover = document.createElement("div"); warp.appendChild(cover); cover.style.position = "absolute"; cover.style.top = "0px"; cover.style.left = "0px"; cover.style.backgroundColor = "#ccc"; var opac = parseFloat(opts.opacity) || 0.3; cover.style.opacity = opac; cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")"; cover.style.width = "100%"; cover.style.height = "100%"; cover.style.zIndex = 2; cover.style.visibility = "hidden"; clip = document.createElement("img"); warp.appendChild(clip); clipWidth = (opts.clip && opts.clip.width) || "60px"; clipHeight = (opts.clip && opts.clip.height) || "60px"; clip.src = beImg.src; clip.className = beImg.className; clip.style.position = "absolute"; clip.style.top = "0px"; clip.style.left = "0px"; clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)"; clip.style.backgroundColor = "#ccc"; clip.style.zIndex = 3; //ie里面会变态的自动设置宽度和高度 clip.removeAttribute("width"); clip.removeAttribute("height"); })(); function layerPos(e){ if(e.layerX && e.layerY){ return {x:e.layerX,y:e.layerY}; } else { return {x:e.x,y:e.y}; } } function absolutePos(e){ if(e.pageX && e.pageY){ return {x:e.pageX,y:e.pageY}; } else { var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft); var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop); return {x:x,y:y}; } } var showExpand = function(x,y,e){ if(!expand){ initExpand(); } expImg.style.left = (-1 * x) * mult + "px"; expImg.style.top = (-1 * y ) * mult + "px"; if((!opts.expand) || (!opts.expand.id)){ var aPos = absolutePos(e); expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px"; expand.style.top = aPos.y + "px"; } //初始化放大的div function initExpand(){ if(opts.expand && opts.expand.id) { expand = _(opts.expand.id); } else { expand = document.createElement("div"); if(opts.expand && opts.expand.style){ for(var p in opts.expand.style){ expand.style[p] = opts.expand.style[p]; } } expand.style.border = "1px solid #000"; expand.style.position = "absolute"; expand.style.left ="0"; expand.style.right = "0"; expand.style.display = "block"; document.body.appendChild(expand); if(clip.clientWidth>clip.clientHeight){ expand.style.width = clip.clientWidth + "px"; expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px"; } else { expand.style.height = clip.clientHeight + "px"; expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px"; } expand.style.zIndex = 4; } expand.style.overflow = "hidden"; if((expand.style.position != "relative") && (expand.style.position != "absolute")){ //变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 expand.style.position = "relative"; expand.style.left = "0"; expand.style.top = "0"; } expImg = document.createElement("img"); expImg.src = beImg.src; expImg.style.position = "relative"; expImg.style.left = "0px"; expImg.style.top = "0px"; expand.appendChild(expImg); expImg.removeAttribute("width"); expImg.removeAttribute("height"); //计算图片放大的倍数 var ew = expand.clientWidth; var eh = expand.clientHeight; var cw = parseFloat(clipWidth); var ch = parseFloat(clipHeight); mult = (ew/cw < eh/ch) ? ew/cw : eh/ch; //调整放大图片的大小 expImg.style.width = beImg.clientWidth * mult + "px"; expImg.style.height = beImg.clientHeight * mult + "px"; } } cover.onmousemove = clip.onmousemove = function(e){ var e = e || event; var pos = layerPos(e); var x = pos.x; var y = pos.y; //判断x和y坐标有没有超出范围 var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2; x = (x < w)?w:x; y = (y < h)?h:y; x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x; y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y; clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)"; showExpand(x - w,y - h,e); } warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){ //如果清除的定时器存在,则删除. if(closeTimeId){ clearTimeout(closeTimeId); closeTimeId = null; } if(cover.style.visibility === "hidden"){ cover.style.visibility = "visible"; } if(expand && expand.style.display === "none"){ expand.style.display = "block"; } } warp.onmouseout = function(){ //延迟一定时间后清除 closeTimeId = setTimeout(function(){ cover.style.visibility = "hidden"; if((!opts.expand) || (!opts.expand.id)){ expand.style.display = "none"; } },130); } return { clear:function(){ //在这里清除放大镜效果 warp.removeChild(clip); warp.removeChild(cover); warp.onmouseout = null; if((!opts.expand) || (!opts.expand.id)){ expand.style.display = "none"; } } } } </script>
<script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});</script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/shoujikaifa/26305/
上一篇:
[手机号传另一个手机]手机号与传真号码正则验证代码
下一篇:
[网站编辑]网站变灰css代码(支持flash变灰)
相关推荐
ps皮肤美白教程|ps皮肤美白教程
php提取字符串_php提取文章内容图片地址正则表达式
存储过程执行select与insert同一个表sql语句_存储过程执行select与insert同一个表sql语句
【sql server】sql insert into .. select..死锁解决办法
photoshop换照片底色_Photoshop照片成非主流甜美女生头像
如何更好的整理电脑桌面|如何更好的写网站标题及关键分析
[asp.net core]asp.net 图片保存SQL Server并显示图片的方法
网页浮动广告代码_网页浮动广告js代码
【js弹出层代码兼容多浏览器】js弹出层代码(兼容多浏览器)
淮安seo网站|网站做seo不是简单的发外链
网友关注
asp.net core|asp.net socket的实例
【cookie和session的区别和用法】cookie 删除,赋值与获取cookie值js 代码
[js图片滚动效果代码]js图片滚动效果代码
[成都网站建设公司排名]网站优化排名之网站建设优化篇
[json]js 显示当前时间
qq名片漂浮怎么关闭|可关闭的qq客服漂浮代码
信用卡图片广告_flash图片广告轮换代码
【photoshop换照片底色】Photoshop快速给人物照片加边框
网站顶部图片_网站顶部广告js代码
[ps怎么给图片加边框颜色]ps怎么给图片加边框
热门标签
放大镜简笔画图片
图片放大镜软件
最新手机软件
手机软件
生成二维码_生成讯雷地址php代码
手机软件
汉字转拼音 在线翻译_完善的汉字转拼音php转换类
手机软件
[手机自动跳转别的软件]3秒后自动跳转到首页代码
手机软件
站群软件|站群SEO优化六大误区的规避方法
手机软件
【sns社交网站】2011年SNS社交网盛行 国内市场规模将达10亿元
手机软件
【两款airdots】两款实用php分页代码
手机软件
【两款airdots】两款漂亮js 弹出提示层代码
手机软件
【两款airdots】两款js图片等比例缩放(兼容IE6,IE7,FF)
手机软件
ps婚纱照片处理软件|ps婚纱照片处理
手机软件
[淘宝编辑宝贝是否要先下架]淘宝编辑器
手机软件热门文章
手机软件
[网站编辑]网站变灰css代码(支持flash变灰)
手机软件
两款airdots|两款右下角浮动广告js代码
手机软件
[有一款能选择僵尸和人类的游戏叫什么]又一款php分页类代码
手机软件
【两款airdots】两款不间断向上滚动代码
手机软件
两款airdots|两款js 验证日期格式与验证实例
手机软件
【两款airdots】两款js 验证只能输入字母.数字和下划线
手机软件
[淘宝编辑宝贝是否要先下架]淘宝编辑器
手机软件
ps婚纱照片处理软件|ps婚纱照片处理
手机软件
【两款airdots】两款js图片等比例缩放(兼容IE6,IE7,FF)
手机软件
【两款airdots】两款漂亮js 弹出提示层代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有