资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js 图片缩放特效代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片特效</title> <style type="text/css"> .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:5%; left:5%;} .lightbox dt{background:#f4f4f4;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20isIE%20%3D%20(document.all)%20%3F%20true%20%3A%20false%3B%20%0D%0Avar%20isIE6%20%3D%20isIE%20%26%26%20(%5B%2FMSIE%20(%5Cd)%5C.0%2Fi.exec(navigator.userAgent)%5D%5B0%5D%5B1%5D%20%3D%3D%206)%3B%20%0D%0Avar%20%24%20%3D%20function%20(id)%20%0D%0A%7B%20%0D%0Areturn%20%22string%22%20%3D%3D%20typeof%20id%20%3F%20document.getElementById(id)%20%3A%20id%3B%20%0D%0A%7D%3B%20%0D%0Avar%20Class%20%3D%20%0D%0A%7B%20%0D%0Acreate%3A%20function()%20%0D%0A%7B%20%0D%0Areturn%20function()%20%7B%20this.initialize.apply(this%2C%20arguments)%3B%20%7D%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Avar%20Extend%20%3D%20function(destination%2C%20source)%20%0D%0A%7B%20%0D%0Afor%20(var%20property%20in%20source)%20%0D%0A%7B%20%0D%0Adestination%5Bproperty%5D%20%3D%20source%5Bproperty%5D%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Avar%20Bind%20%3D%20function(object%2C%20fun)%20%0D%0A%7B%20%0D%0Areturn%20function()%20%0D%0A%7B%20%0D%0Areturn%20fun.apply(object%2C%20arguments)%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Avar%20Each%20%3D%20function(list%2C%20fun)%20%0D%0A%7B%20%0D%0Afor%20(var%20i%20%3D%200%2C%20len%20%3D%20list.length%3B%20i%20%3C%20len%3B%20i%2B%2B)%20%7B%20fun(list%5Bi%5D%2C%20i)%3B%20%7D%20%0D%0A%7D%3B%20%0D%0Avar%20Contains%20%3D%20function(a%2C%20b)%20%0D%0A%7B%20%0D%0Areturn%20a.contains%20%3F%20a%20!%3D%20b%20%26%26%20a.contains(b)%20%3A%20!!(a.compareDocumentPosition(b)%20%26%2016)%3B%20%0D%0A%7D%3B%20%0D%0Avar%20OverLay%20%3D%20Class.create()%3B%20%0D%0AOverLay.prototype%20%3D%20%0D%0A%7B%20%0D%0Ainitialize%3A%20function(options)%20%0D%0A%7B%20%0D%0Athis.SetOptions(options)%3B%20%0D%0Athis.Lay%20%3D%20%24(this.options.Lay)%20%7C%7C%20document.body.insertBefore(document.createElement(%22div%22)%2C%20document.body.childNodes%5B0%5D)%3B%20%0D%0Athis.Color%20%3D%20this.options.Color%3B%20%0D%0Athis.Opacity%20%3D%20parseInt(this.options.Opacity)%3B%20%0D%0Athis.zIndex%20%3D%20parseInt(this.options.zIndex)%3B%20%0D%0A%0D%0Awith(this.Lay.style)%7B%20display%20%3D%20%22none%22%3B%20zIndex%20%3D%20this.zIndex%3B%20left%20%3D%20top%20%3D%200%3B%20position%20%3D%20%22fixed%22%3B%20width%20%3D%20height%20%3D%20%22100%25%22%3B%20%7D%20%0D%0Aif(isIE6)%7B%20%0D%0Athis.Lay.style.position%20%3D%20%22absolute%22%3B%20%0D%0A%2F%2Fie6%E8%AE%BE%E7%BD%AE%E8%A6%86%E7%9B%96%E5%B1%82%E5%A4%A7%E5%B0%8F%E7%A8%8B%E5%BA%8F%20%0D%0Athis._resize%20%3D%20Bind(this%2C%20function()%7B%20%0D%0Athis.Lay.style.width%20%3D%20Math.max(document.documentElement.scrollWidth%2C%20document.documentElement.clientWidth)%20%2B%20%22px%22%3B%20%0D%0Athis.Lay.style.height%20%3D%20Math.max(document.documentElement.scrollHeight%2C%20document.documentElement.clientHeight)%20%2B%20%22px%22%3B%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%E9%81%AE%E7%9B%96select%20%0D%0Athis.Lay.innerHTML%20%3D%20'%3Ciframe%20style%3D%22position%3Aabsolute%3Btop%3A0%3Bleft%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3Bfilter%3Aalpha(opacity%3D0)%3B%22%3E%3C%2Fiframe%3E'%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%BB%98%E8%AE%A4%E5%B1%9E%E6%80%A7%20%0D%0ASetOptions%3A%20function(options)%20%0D%0A%7B%20%0D%0Athis.options%20%3D%20%0D%0A%7B%2F%2F%E9%BB%98%E8%AE%A4%E5%80%BC%20%0D%0ALay%3A%20null%2C%2F%2F%E8%A6%86%E7%9B%96%E5%B1%82%E5%AF%B9%E8%B1%A1%20%0D%0AColor%3A%20%22%23000%22%2C%2F%2F%E8%83%8C%E6%99%AF%E8%89%B2%20%0D%0AOpacity%3A%2050%2C%2F%2F%E9%80%8F%E6%98%8E%E5%BA%A6(0-100)%20%0D%0AzIndex%3A%201000%2F%2F%E5%B1%82%E5%8F%A0%E9%A1%BA%E5%BA%8F%20%0D%0A%7D%3B%20%0D%0AExtend(this.options%2C%20options%20%7C%7C%20%7B%7D)%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E6%98%BE%E7%A4%BA%20%0D%0AShow%3A%20function()%20%0D%0A%7B%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9ie6%20%0D%0Aif(isIE6)%7B%20this._resize()%3B%20window.attachEvent(%22onresize%22%2C%20this._resize)%3B%20%7D%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F%20%0D%0Awith(this.Lay.style)%20%0D%0A%7B%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%80%8F%E6%98%8E%E5%BA%A6%20%0D%0AisIE%20%3F%20filter%20%3D%20%22alpha(opacity%3A%22%20%2B%20this.Opacity%20%2B%20%22)%22%20%3A%20opacity%20%3D%20this.Opacity%20%2F%20100%3B%20%0D%0AbackgroundColor%20%3D%20this.Color%3B%20display%20%3D%20%22block%22%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%85%B3%E9%97%AD%20%0D%0AClose%3A%20function()%20%0D%0A%7B%20%0D%0Athis.Lay.style.display%20%3D%20%22none%22%3B%20%0D%0Aif(isIE6)%7B%20window.detachEvent(%22onresize%22%2C%20this._resize)%3B%20%7D%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20LightBox%20%3D%20Class.create()%3B%20%0D%0ALightBox.prototype%20%3D%20%0D%0A%7B%20%0D%0Ainitialize%3A%20function(box%2C%20options)%20%0D%0A%7B%20%0D%0Athis.Box%20%3D%20%24(box)%3B%2F%2F%E6%98%BE%E7%A4%BA%E5%B1%82%20%0D%0Athis.OverLay%20%3D%20new%20OverLay(options)%3B%2F%2F%E8%A6%86%E7%9B%96%E5%B1%82%20%0D%0Athis.SetOptions(options)%3B%20%0D%0A%0D%0Athis.Fixed%20%3D%20!!this.options.Fixed%3B%20%0D%0Athis.Over%20%3D%20!!this.options.Over%3B%20%0D%0Athis.Center%20%3D%20!!this.options.Center%3B%20%0D%0Athis.onShow%20%3D%20this.options.onShow%3B%20%0D%0A%0D%0Athis.Box.style.zIndex%20%3D%20this.OverLay.zIndex%20%2B%201%3B%20%0D%0Athis.Box.style.display%20%3D%20%22none%22%3B%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9ie6%E7%94%A8%E7%9A%84%E5%B1%9E%E6%80%A7%20%0D%0Aif(isIE6)%20%0D%0A%7B%20%0D%0Athis._top%20%3D%20this._left%20%3D%200%3B%20this._select%20%3D%20%5B%5D%3B%20%0D%0Athis._fixed%20%3D%20Bind(this%2C%20function()%7B%20this.Center%20%3F%20this.SetCenter()%20%3A%20this.SetFixed()%3B%20%7D)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%BB%98%E8%AE%A4%E5%B1%9E%E6%80%A7%20%0D%0ASetOptions%3A%20function(options)%20%0D%0A%7B%20%0D%0Athis.options%20%3D%20%0D%0A%7B%2F%2F%E9%BB%98%E8%AE%A4%E5%80%BC%20%0D%0AOver%3A%20true%2C%2F%2F%E6%98%AF%E5%90%A6%E6%98%BE%E7%A4%BA%E8%A6%86%E7%9B%96%E5%B1%82%20%0D%0AFixed%3A%20false%2C%2F%2F%E6%98%AF%E5%90%A6%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%20%0D%0ACenter%3A%20false%2C%2F%2F%E6%98%AF%E5%90%A6%E5%B1%85%E4%B8%AD%20%0D%0AonShow%3A%20function()%7B%7D%2F%2F%E6%98%BE%E7%A4%BA%E6%97%B6%E6%89%A7%E8%A1%8C%20%0D%0A%7D%3B%20%0D%0AExtend(this.options%2C%20options%20%7C%7C%20%7B%7D)%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9ie6%E7%9A%84%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%E7%A8%8B%E5%BA%8F%20%0D%0ASetFixed%3A%20function()%20%0D%0A%7B%20%0D%0Athis.Box.style.top%20%3D%20document.documentElement.scrollTop%20-%20this._top%20%2B%20this.Box.offsetTop%20%2B%20%22px%22%3B%20%0D%0Athis.Box.style.left%20%3D%20document.documentElement.scrollLeft%20-%20this._left%20%2B%20this.Box.offsetLeft%20%2B%20%22px%22%3B%20%0D%0A%0D%0Athis._top%20%3D%20document.documentElement.scrollTop%3B%20this._left%20%3D%20document.documentElement.scrollLeft%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9ie6%E7%9A%84%E5%B1%85%E4%B8%AD%E5%AE%9A%E4%BD%8D%E7%A8%8B%E5%BA%8F%20%0D%0ASetCenter%3A%20function()%20%0D%0A%7B%20%0D%0Athis.Box.style.marginTop%20%3D%20document.documentElement.scrollTop%20-%20this.Box.offsetHeight%20%2F%202%20%2B%20%22px%22%3B%20%0D%0Athis.Box.style.marginLeft%20%3D%20document.documentElement.scrollLeft%20-%20this.Box.offsetWidth%20%2F%202%20%2B%20%22px%22%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E6%98%BE%E7%A4%BA%20%0D%0AShow%3A%20function(options)%20%0D%0A%7B%20%0D%0A%2F%2F%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%20%0D%0Athis.Box.style.position%20%3D%20this.Fixed%20%26%26%20!isIE6%20%3F%20%22fixed%22%20%3A%20%22absolute%22%3B%20%0D%0A%2F%2F%E8%A6%86%E7%9B%96%E5%B1%82%20%0D%0Athis.Over%20%26%26%20this.OverLay.Show()%3B%20%0D%0Athis.Box.style.display%20%3D%20%22block%22%3B%20%0D%0A%2F%2F%E5%B1%85%E4%B8%AD%20%0D%0Aif(this.Center)%20%0D%0A%7B%20%0D%0Athis.Box.style.top%20%3D%20this.Box.style.left%20%3D%20%2250%25%22%3B%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AEmargin%20%0D%0Aif(this.Fixed)%20%0D%0A%7B%20%0D%0Athis.Box.style.marginTop%20%3D%20-%20this.Box.offsetHeight%20%2F%202%20%2B%20%22px%22%3B%20%0D%0Athis.Box.style.marginLeft%20%3D%20-%20this.Box.offsetWidth%20%2F%202%20%2B%20%22px%22%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.SetCenter()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9ie6%20%0D%0Aif(isIE6)%20%0D%0A%7B%20%0D%0Aif(!this.Over)%20%0D%0A%7B%20%0D%0A%2F%2F%E6%B2%A1%E6%9C%89%E8%A6%86%E7%9B%96%E5%B1%82ie6%E9%9C%80%E8%A6%81%E6%8A%8A%E4%B8%8D%E5%9C%A8Box%E4%B8%8A%E7%9A%84select%E9%9A%90%E8%97%8F%20%0D%0Athis._select.length%20%3D%200%3B%20%0D%0AEach(document.getElementsByTagName(%22select%22)%2C%20Bind(this%2C%20function(o)%7B%20%0D%0Aif(!Contains(this.Box%2C%20o))%7B%20o.style.visibility%20%3D%20%22hidden%22%3B%20this._select.push(o)%3B%20%7D%20%0D%0A%7D))%20%0D%0A%7D%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E6%98%BE%E7%A4%BA%E4%BD%8D%E7%BD%AE%20%0D%0Athis.Center%20%3F%20this.SetCenter()%20%3A%20this.Fixed%20%26%26%20this.SetFixed()%3B%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E5%AE%9A%E4%BD%8D%20%0D%0Athis.Fixed%20%26%26%20window.attachEvent(%22onscroll%22%2C%20this._fixed)%3B%20%0D%0A%7D%20%0D%0Athis.onShow()%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E5%85%B3%E9%97%AD%20%0D%0AClose%3A%20function()%20%0D%0A%7B%20%0D%0Athis.Box.style.display%20%3D%20%22none%22%3B%20%0D%0Athis.OverLay.Close()%3B%20%0D%0Aif(isIE6)%20%0D%0A%7B%20%0D%0Awindow.detachEvent(%22onscroll%22%2C%20this._fixed)%3B%20%0D%0AEach(this._select%2C%20function(o)%7B%20o.style.visibility%20%3D%20%22visible%22%3B%20%7D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Afunction%20ZoomImg(o)%20%0D%0A%7B%20%0D%0Avar%20zoom%20%3D%20parseInt(o.style.zoom%2C%2010)%20%7C%7C%20100%3B%20%0D%0Azoom%20%2B%3D%20event.wheelDelta%20%2F%2012%3B%20%0D%0Aif(zoom%20%3E60%26%26zoom%3C120)%20%0D%0Ao.style.zoom%20%3D%20zoom%20%2B%20'%25'%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0Afunction%20ResizeImage()%20%0D%0A%7B%20%0D%0Avar%20img%3Ddocument.getElementById(%22imgclose%22)%3B%20%0D%0Avar%20a%3Dimg.width%3B%20%0D%0Avar%20b%3Dimg.height%3B%20%0D%0A%2F%2F%E7%A7%BB%E9%99%A4img%E7%9A%84width%2C%E8%BF%99%E6%A0%B7%E5%B0%B1%E5%BE%97%E5%88%B0%E5%8E%9F%E5%A7%8B%E7%9A%84%E9%95%BF%E4%BA%86%2C%E4%B8%8D%E8%BF%87%E5%9B%BE%E7%89%87%E4%B9%9F%E6%94%BE%E5%A4%A7%E4%BA%86%2C%E4%B8%8A%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%8D%E4%BC%9A%2C%E5%8F%AA%E6%98%AF%E4%BD%BF%E7%94%A8Image%E5%AF%B9%E8%B1%A1%E6%9D%A5%E8%8E%B7%E5%8F%96%E5%8E%9F%E5%A7%8B%E7%9A%84%E9%95%BF%20%0D%0Aimg.removeAttribute(%22width%22)%3B%20%0D%0Aimg.removeAttribute(%22height%22)%3B%20%0D%0Avar%20w%3Dimg.width%3B%20%0D%0Avar%20h%3Dimg.height%3B%20%0D%0Adocument.getElementById(%22%22).style.width%3Dw%3B%20%0D%0Adocument.getElementById(%22%22).style.height%3Dh%3B%20%0D%0Aalert(w%2B%22%20%22%2Bh)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <table id="idBox" class="lightbox"> <tr id="idBoxHead" style="text-align:right"> <td> <span style="font-size:12px">鼠标滚轮放大图片</span> <a href="2.jpg" _ewebeditor_ta_href="2.jpg" target="_blank"><img src="newwindow.gif" _ewebeditor_ta_src="newwindow.gif" onclick="" alt="" width="16" height="16" border="0"/></a> <img src="resize.gif" _ewebeditor_ta_src="resize.gif" onclick="ResizeImage()" alt="" width="16" height="16" /> <img src="close.gif" _ewebeditor_ta_src="close.gif" id="idBoxCancel" alt="close" width="11" height="11"/> </td> </tr> <tr style="text-align:left"> <td><img src="2.jpg" _ewebeditor_ta_src="2.jpg" height="500" onmousewheel="return ZoomImg(this)" style="width:800px" id="imgclose" alt="" /></td> </tr> </table> <div> <img src="2.jpg" _ewebeditor_ta_src="2.jpg" alt="" id="iimg" width="120" height="100"/> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20box%20%3D%20new%20LightBox(%22idBox%22)%3B%20%0D%0A%24(%22idBoxCancel%22).onclick%20%3D%20function()%7B%20box.Close()%3B%20%7D%20%0D%0A%24(%22imgclose%22).onclick%20%3D%20function()%7B%20box.Close()%3B%20%7D%20%0D%0A%24(%22iimg%22).onclick%20%3D%20function()%7B%20box.Show()%3B%20%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程