网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
javascript学习指南|JavaScript图片放大效果代码
javascript学习指南|JavaScript图片放大效果代码
发布时间:2018-03-24
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
Magnifier
<script type="text/javascript"> function getEventObject(W3CEvent) { //事件标准化函数 return W3CEvent || window.event; } function getPointerPosition(e) { //兼容
浏览器
的鼠标x,y获得函数 e = e || getEventObject(e); var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return { "x":x,"y":y }; } function setOpacity(elem,level) { //兼容
浏览器
设置透明值 if(elem.filters) { elem.style.filter = "alpha(opacity=" + level * 100 + ")"; } else { elem.style.opacity = level; } } function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值 for(var i in prop) { if(i == "opacity") { setOpacity(elem,prop[i]); } else { elem.style[i] = prop[i]; } } return elem; } var magnifier = { m : null, init:function(magni){ var m = this.m = magni || { cont : null, //装载原始图像的div img : null, //放大的图像 mag : null, //放大框 scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决 } css(m.img,{ "position" : "absolute", "width" : (m.cont.clientWidth * m.scale) + "px", //原始图像的宽*比例值 "height" : (m.cont.clientHeight * m.scale) + "px" //原始图像的高*比例值 }) css(m.mag,{ "display" : "none", "width" : m.cont.clientWidth + "px", //m.cont为原始图像,与原始图像等宽 "height" : m.cont.clientHeight + "px", "position" : "absolute", "left" : m.cont.offsetLeft + m.cont.offsetWidth + 10 + "px", //放大框的位置为原始图像的右方远10px "top" : m.cont.offsetTop + "px" }) var borderWid = m.cont.getElementsByTagName("div")[0].offsetWidth - m.cont.getElementsByTagName("div")[0].clientWidth; //获取border的宽 css(m.cont.getElementsByTagName("div")[0],{ //m.cont.getElementsByTagName("div")[0]为浏览框 "display" : "none", //开始设置为不可见 "width" : m.cont.clientWidth / m.scale - borderWid + "px", //原始图片的宽/比例值 - border的宽度 "height" : m.cont.clientHeight / m.scale - borderWid + "px", //原始图片的高/比例值 - border的宽度 "opacity" : 0.5 //设置透明度 }) m.img.src = m.cont.getElementsByTagName("img")[0].src; //让原始图像的src值给予放大图像 m.cont.style.cursor = "crosshair"; m.cont.onmouseover = magnifier.start; }, start:function(e){ if(document.all){ //只在IE下执行,主要避免IE6的select无法覆盖 magnifier.createIframe(magnifier.m.img); } this.onmousemove = magnifier.move; //this指向m.cont this.onmouseout = magnifier.end; }, move:function(e){ var pos = getPointerPosition(e); //事件标准化 this.getElementsByTagName("div")[0].style.display = ""; css(this.getElementsByTagName("div")[0],{ "top" : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName("div")[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName("div")[0].offsetHeight) + "px", "left" : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName("div")[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName("div")[0].offsetWidth) + "px" //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像 }) magnifier.m.mag.style.display = ""; css(magnifier.m.img,{ "top" : - (parseInt(this.getElementsByTagName("div")[0].style.top) * magnifier.m.scale) + "px", "left" : - (parseInt(this.getElementsByTagName("div")[0].style.left) * magnifier.m.scale) + "px" }) }, end:function(e){ this.getElementsByTagName("div")[0].style.display = "none"; magnifier.removeIframe(magnifier.m.img); //销毁iframe magnifier.m.mag.style.display = "none"; }, createIframe:function(elem){ var layer = document.createElement("iframe"); layer.tabIndex = "-1"; layer.src = "javascript:false;"; elem.parentNode.appendChild(layer); layer.style.width = elem.offsetWidth + "px"; layer.style.height = elem.offsetHeight + "px"; }, removeIframe:function(elem){ var layers = elem.parentNode.getElementsByTagName("iframe"); while(layers.length >0){ layers[0].parentNode.removeChild(layers[0]); } } } window.onload = function(){ magnifier.init({ cont : document.getElementById("magnifier"), img : document.getElementById("magnifierImg"), mag : document.getElementById("mag"), scale : 3 }); } </script>
select测试
是否能覆盖
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/22198/
上一篇:
[asp.net]asp 生成图片缩略图代码
下一篇:
[javascript学习指南]javascript setInterval实例教程
相关推荐
[asp.net]asp 生成图片缩略图代码
网页背景图片_随便给网页背景换背景图片
json_js 调用多input文本输入框代码
【javascript学习指南】javascript 纯js图片广告轮换效果
seo优化_seo优化教程:如何优化内部链接?
[css div 居中]css+div 3行3列图片自动排列代码
[css教程]css+javascript 弹出层代码
【css div 居中】css+div 下拉菜单代码
【qq聊天弹出图片怎么关】QQ客服弹出聊天代码
【javascript学习指南】Java与JavaScript的区别分析
网友关注
js网页加载进度条代码|js网页加载进度条代码
javascript学习指南_JAVA文件操作常用函数
【javascript学习指南】javascript 蛇小游戏代码
免费的_免费300m/asp/mysql/access/iis200免费空间
oracle 存储过程|oracle ceil cos ascii chr函数
智力小游戏有哪些|js智力小游戏
电脑主机_超级主机100M(asp-100型)+Mysql
迅雷测速|迅雷CEO邹胜龙:假联盟来深圳开会欺人太甚
oracle 存储过程|oracle cosh exp floor in log等函数
js小游戏源码|js小游戏,打网球效果代码
热门标签
最新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常
[javascript学习指南]javascript setInterval实例教程
php常
javascript学习指南_javascript自动求各代码
php常
[asp教程生成静态html文件下载]asp教程-生成静态html文件实例代码
php常
【javascript学习指南】JavaScript 颜色梯度和渐变效果
php常
【美橙互联官网】仿美橙互联的导航效果
php常
css下拉菜单代码_css下拉菜单被flash挡住解决办法
php常
【php删除数组指定元素】php删除数组重复值代码
php常
【单选框和复选框的区别】点击单选框切换效果
php常
【javascript学习指南】javascript 漂亮实用的万年历代码
php常
【javascript学习指南】Javascript实现CSS代码高亮显示
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有