2022年网页特效代码 2.pdf

《2022年网页特效代码 2.pdf》由会员分享，可在线阅读，更多相关《2022年网页特效代码 2.pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、给地图加上放大镜 网页特效 - 给地图加个放大镜- 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 =

2、300 var largetop = 30 / width and height of the enlarged images sector (visible part, pixels) var clipwidth = 240 var clipheight = 160 var isNav, isIE var offsetX, offsetY var selectedObj var largewidth = 0 var largeheight = 0 var thumbwidth = Math.floor(largewidth/shrinkfactor) var thumbheight = Ma

3、th.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 名师资料总结 - - -精品资料欢迎下

4、载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 9 页 - - - - - - - - - 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 se

5、tZIndex(obj, zOrder) obj.zIndex = zOrder function shiftTo(obj, x, y) if (isNav) if(x=(document.thumb.left+thumbwidth-dragimgwidth-2) x=document.thumb.left+thumbwidth-dragimgwidth-2 if(y=(document.thumb.top+thumbheight-dragimgheight-2) y=document.thumb.top+thumbheight-dragimgheight-2 obj.moveTo(x,y)

6、else 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+thumbheight-dragimgheight-2) y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2 obj.pixelLeft = x obj.pixelTop = y clip

7、top = (y-thumbtop)*shrinkfactor clipbottom = cliptop+clipheight clipleft = (x-thumbleft)*shrinkfactor clipright = clipleft+clipwidth 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 9 页 - - - - - - - - - if (document.all) clippoints =rect(+cliptop+ +clipright+ +c

8、lipbottom+ +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 doc

9、ument.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.layersi if (clickX te

10、stObj.left) & (clickX testObj.top) & (clickY testObj.top + testObj.clip.height & document.layersi.id=dragimg) selectedObj = testObj setZIndex(selectedObj, 100) return else var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf(dragimg) != -1) selectedObj = imgObj.parentElement.styl

11、e setZIndex(selectedObj,100) return selectedObj = null return 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 9 页 - - - - - - - - - function dragIt(evt) if (selectedObj) if (isNav) shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY) else shiftTo(se

12、lectedObj, (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.off

13、setY 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) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - -

14、 - - - - - 名师精心整理 - - - - - - - 第 4 页，共 9 页 - - - - - - - - - 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) docu

15、ment.thumb.document.write() document.thumb.document.close() document.dragimg.document.write() 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=d

16、ragimgtop 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

17、largeheight=document.all.large.offsetHeight thumbwidth = Math.floor(largewidth/shrinkfactor) thumbheight = Math.floor(largeheight/shrinkfactor) thumb.innerHTML= dragimg.innerHTML= document.all.large.style.posLeft=largeleft document.all.large.style.posTop=largetop 名师资料总结 - - -精品资料欢迎下载 - - - - - - - -

18、 - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 9 页 - - - - - - - - - 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+

19、+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 用鼠标移动下面的方框，效果不错吧 打开一全屏窗口脚本说明：把如下代码加入区域中 : 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

20、- - 名师精心整理 - - - - - - - 第 6 页，共 9 页 - - - - - - - - - 让你的文本渐隐渐显 使你的链接渐隐渐显的效果 startColor = #671700; / 定义链接颜色endColor = #D8D1C5; / 定义要渐变到最后的颜色stepIn = 17; stepOut = 23; /* 定义是否让所有的文本链接自动渐变，true 为是， false 为否*/ autoFade = true; /* 在这里定义css样式里的类class： fade， 如果为 true， 那么你要将要渐变的链接上加上此fade样式*/ sloppyClass

21、= false; hexa = new makearray(16); for(var i = 0; i 10; i+) hexai = i; hexa10=a; hexa11=b; hexa12=c; hexa13=d; hexa14=e; hexa15=f; document.onmouseover = domouseover; document.onmouseout = domouseout; startColor = dehexize(startColor.toLowerCase(); endColor = dehexize(endColor.toLowerCase(); var fad

22、eId = new Array(); function dehexize(Color) var colorArr = new makearray(3); for (i=1; i7; i+) for (j=0; j16; j+) if (Color.charAt(i) = hexaj) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 9 页 - - - - - - - - - if (i%2 !=0) colorArrMath.floor(i-1)/2)=eval(j)*1

23、6; else colorArrMath.floor(i-1)/2)+=eval(j); return colorArr; function domouseover() if(document.all) var srcElement = event.srcElement; if (srcElement.tagName = A & autoFade) | srcElement.className = fade | (sloppyClass & srcElement.className.indexOf(fade) != -1) fade(startColor,endColor,srcElement

24、.uniqueID,stepIn); function domouseout() if (document.all) var srcElement = event.srcElement; if (srcElement.tagName = A & autoFade) | srcElement.className = fade | (sloppyClass & srcElement.className.indexOf(fade) != -1) fade(endColor,startColor,srcElement.uniqueID,stepOut); function makearray(n) t

25、his.length = n; for(var i = 1; i = n; i+) thisi = 0; return this; function hex(i) if (i 255) return ff; else return + hexaMath.floor(i/16) + hexai%16; function setColor(r, g, b, element) var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = #+hr+hg+hb; function fade(s,e, element,s

26、tep) var sr = s0; var sg = s1; var sb = s2; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 9 页 - - - - - - - - - var er = e0; var eg = e1; var eb = e2; if (fadeId0 != null & fade0 != element) setColor(sr,sg,sb,eval(fadeId0); var i = 1; while(i fadeId.length) cl

27、earTimeout(fadeIdi); i+; for(var i = 0; i = step; i+) fadeIdi+1 = setTimeout(setColor(Math.floor( +sr+ *( +step+ - +i+ )/ +step+ ) + +er+ * ( +i+ / + step+ ),Math.floor( +sg+ * ( +step+ - +i+ )/ +step+ ) + +eg+ * ( +i+ / +step+ ),Math.floor( +sb+ * ( +step+ - +i+ )/ +step+ ) + +eb+ * ( +i+ / +step+ ),+element+);,i*step); fadeId0 = element; 让你的文本链接渐隐渐显 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 9 页 - - - - - - - - -