域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
图形特效
>> 正文
给地图加个放大镜
作者:
天诚世纪
更新时间:2009-11-16 17:32:50
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效观止|tc-21.com| --- 给地图加个放大镜</title> <SCRIPT> var shrinkfactor=5 // left and top position of the thumbnailimage // (distance to the left and top browser-margin, pixels) var thumbleft = 30 var thumbtop = 30 // left and top position of the zoomed image // (distance to the left and top browser-margin, pixels) var largeleft = 300 var largetop = 30 // width and height of the enlarged image's sector (visible part, pixels) var clipwidth = 240 var clipheight = 160 </SCRIPT> <SCRIPT> var isNav, isIE var offsetX, offsetY var selectedObj var largewidth = 0 var largeheight = 0 var thumbwidth = Math.floor(largewidth/shrinkfactor) var thumbheight = Math.floor(largeheight/shrinkfactor) var dragimgwidth = Math.floor(clipwidth/shrinkfactor) var dragimgheight = Math.floor(clipheight/shrinkfactor) var dragimgleft = thumbleft+3 var dragimgtop = thumbtop+3 var difleft= largeleft-thumbleft var diftop= largetop-thumbtop var clippoints var cliptop=0 var clipbottom=cliptop+clipheight var clipleft=0 var clipright=clipleft+clipwidth if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } function setZIndex(obj, zOrder) { obj.zIndex = zOrder } function shiftTo(obj, x, y) { if (isNav) { if(x<=document.thumb.left) {x=document.thumb.left} if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2} if(y<=document.thumb.top) {y=document.thumb.top} if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2} obj.moveTo(x,y) } else { if(x<=document.all.thumb.style.posLeft) {x=document.all.thumb.style.posLeft} if(x>=(document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2} if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop} if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2} obj.pixelLeft = x obj.pixelTop = y } cliptop = (y-thumbtop)*shrinkfactor clipbottom = cliptop+clipheight clipleft = (x-thumbleft)*shrinkfactor clipright = clipleft+clipwidth if (document.all) { clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.large.style.posTop=largetop-cliptop document.all.large.style.posLeft=largeleft-clipleft document.all.large.style.clip=clippoints } if (document.layers) { document.large.top=largetop-cliptop document.large.left=largeleft-clipleft document.large.clip.left = clipleft document.large.clip.right = clipright document.large.clip.top = cliptop document.large.clip.bottom = clipbottom } } function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evt.pageX var clickY = evt.pageY for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) { selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("dragimg") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } selectedObj = null return } function dragIt(evt) { if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) return false } } } function engage(evt) { setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } function init() { if (document.layers) { var imageurl=document.large.document.largepic.src largewidth=document.large.document.width largeheight=document.large.document.height thumbwidth = Math.floor(largewidth/shrinkfactor) thumbheight = Math.floor(largeheight/shrinkfactor) document.thumb.document.write("<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+" height="+thumbheight+">") document.thumb.document.close() document.dragimg.document.write("<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">") document.dragimg.document.close() document.large.left=largeleft document.large.top=largetop document.thumb.left=thumbleft document.thumb.top=thumbtop document.dragimg.left=dragimgleft document.dragimg.top=dragimgtop document.large.clip.left=clipleft document.large.clip.right=clipright document.large.clip.top=cliptop document.large.clip.bottom=clipbottom document.large.visibility="visible" setNavEventCapture() } if (document.all) { var imageurl=document.largepic.src largewidth=document.all.large.offsetWidth largeheight=document.all.large.offsetHeight thumbwidth = Math.floor(largewidth/shrinkfactor) thumbheight = Math.floor(largeheight/shrinkfactor) thumb.innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+" height="+thumbheight+">" dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='/ITCenter/UploadFiles_2217/200911/20091116172710423.GIF' width="+dragimgwidth+" height="+dragimgheight+">" document.all.large.style.posLeft=largeleft document.all.large.style.posTop=largetop document.all.thumb.style.posLeft=thumbleft document.all.thumb.style.posTop=thumbtop document.all.dragimg.style.posLeft=dragimgleft document.all.dragimg.style.posTop=dragimgtop clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.large.style.clip=clippoints document.all.large.style.visibility="visible" } document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } window.onload=init </SCRIPT></head> <body> <p>用鼠标移动下面的方框,效果不错吧</p> <center> <DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="/ITCenter/UploadFiles_2217/200911/20091116172710514.JPG"></DIV> <DIV style="position:absolute;" ID="thumb"></DIV> <DIV style="position:absolute;" ID="dragimg"></DIV></center> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200911/20091116173250.html
上一篇文章:
图像圆形虚幻显示特效
下一篇文章:
图片渐隐效果
更多关于
图形特效
的新闻
相关文章
js显示隐藏层
每次刷新后随机显示图片的效果
简单的图片放大展示效果
横向不间断的连续滚动图片/文字广告
仿拍拍paipai.com首页产品图片随机轮显切换效果
用鼠标滚轮滚动控制图片显示的大小
超酷图片放大过渡效果
超酷点击显示过渡效果
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::