网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
javascript学习指南|javascript 弹出放大式图片展示效果
javascript学习指南|javascript 弹出放大式图片展示效果
发布时间:2017-12-04
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
弹出放大式图片展示效果(一)
<script type="text/javascript"> /****************************** * 改变图片大小、位置函数 * * Author: Kevin * * data: 2009-05-17 * ******************************/ function moveElement(elementID,final_x,final_y,final_w,final_h,interval) { /* if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false;*/ var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var wpos = parseInt(elem.style.width); var hpos = parseInt(elem.style.height); if (xpos == final_x && ypos == final_y && wpos == final_w && hpos == final_h) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/5); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/5); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/5); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/5); ypos = ypos - dist; } if (wpos < final_w) { var dist = Math.ceil((final_w - wpos)/5); wpos = wpos + dist; } if (wpos > final_w) { var dist = Math.ceil((wpos - final_w)/5); wpos = wpos - dist; } if (hpos < final_h) { var dist = Math.ceil((final_h - hpos)/5); hpos = hpos + dist; } if (hpos > final_h) { var dist = Math.ceil((hpos - final_h)/5); hpos = hpos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; elem.style.width = wpos + "px"; elem.style.height = hpos + "px"; var repeat = "moveElement(""+elementID+"","+final_x+","+final_y+","+final_w+","+final_h+","+interval+")"; elem.movement = setTimeout(repeat,interval); } </script> <script type="text/javascript"> /****************************** * 动态创建IMG获取对应的链接 * * Author: Kevin * * data: 2009-05-17 * ******************************/ function showPic(whichpic) { var source = whichpic.getAttribute("src"); var bigImg = document.getElementById("bigPic"); bigImg.setAttribute("src",source); var links = whichpic.getAttribute("href") var getLink = document.getElementById("links"); getLink.setAttribute("href",links); return false; } function picLink(url) { var links = url.getAttribute("href") var mlinks = url.getAttribute("name") var plinks = url.getAttribute("href"); var getLink = document.getElementById("links"); var mLink = document.getElementById("more"); var imgLink = document.getElementById("imglink"); getLink.setAttribute("href",links); mLink.setAttribute("href",mlinks); imgLink.setAttribute("href",plinks); return false; } //移动点击事件 function movePic(){ //动态创建大图 var imglink = document.getElementById("imglink"); var showImg = document.createElement("img"); showImg.style.position = "absolute"; showImg.setAttribute("src","http://filesimg.111cn.net/20090609114452985.jpg"); showImg.setAttribute("id","bigPic"); showImg.setAttribute("width","300"); showImg.setAttribute("height","410"); imglink.appendChild(showImg); //获取点击坐标 var menuPic = document.getElementById("menuPic"); var imgLink = menuPic.getElementsByTagName("img"); var linkUrl = menuPic.getElementsByTagName("a"); for ( var i=0; i < imgLink.length; i++) { linkUrl[i].onclick = function() { return picLink(this); } imgLink[i].onclick = function() { showPic(this); showImg.style.left = "0px"; showImg.style.top = "0px"; showImg.style.width = "100px"; showImg.style.height = "140px"; moveElement("bigPic",240,0,300,410,10); } } } window.onload = movePic; </script>
详情>>更多>>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/20432/
上一篇:
flash player|flash 图片切换效果代码
下一篇:
[javascript学习指南]javascript checkbox全选代码
相关推荐
ps抠图教程详细步骤|PS抠图教程-巧妙的抠出透明的雨伞
用ps把照片制作非主流图片大全|用ps把照片制作非主流图片效果
【怎么把两个照片和一起】怎么把照片PS怀旧暗灰色非主流照片效果
[怎样利用ps制作动图]利用ps制作流线高光线条发光效果
js竖向二级导航菜单_js竖向二级导航菜单效果
[photoshop换照片底色]利用photoshop把照片处理成艺术照片
非主流头像带字|非主流头像ps非主流暴闪头像教程
[怎么用ps制作下雨的效果]怎么用PS制作下雨的效果
【未利用地】利用photoshop 来ps3d艺术字的制作
未利用地|利用javascript 屏蔽IE前进和后退功能代码
网友关注
如何ps图片中的文字_如何ps 把照片调亮
怎样利用ps制作动图|利用ps闪光效果制作非主流闪图
ps调色教程|PS调色打造清爽非主流青色照片
[ps如何制作金属效果图]ps如何制作金属效果
【json】js 屏蔽快捷键代码
如何用photoshop通道抠图视频_如何用photoshop通道抠图
动感相册怎么制作|怎么制作非主流动感闪图头像
【html网页排版】html网页中插入flash文件代码
【photoshop换照片底色】利用photoshop给照片人物增加蝴蝶翅膀
[ps照片抠图后怎么给人物换背景图片]ps照片抠图后怎么给人物换背景
热门标签
最新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 checkbox全选代码
php常
asp登录保存数据到cookies_asp登录保存数据到cookie
php常
asp.net|asp 简单ubb代码转换程序
php常
php简单用户登录_php简单用户登陆程序代码
php常
[phpstudy]php 网站同IP查询代码
php常
【javascript学习指南】javascript autocomplate自动提示代码
php常
[flash player]flash FMS AS2转AS3的连接出错
php常
asp是什么意思|asp高效分页程序代码
php常
【asp.net】asp html互换程序代码
php常
asp分页代码|asp分页程序
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有