图片上的左右箭头上一张/下一张js代码浏览代码脚本代码 IT人家-为IT人民服务！

联系我们 | 收藏 | 注册 | 登录

脚本代码网络精品、绝对收藏!

电子杂志企业建站

QQ表情大全　电子杂志制作　 2010圣诞素材　 2010虎年素材　收录站集合　站长工具　站长导航　精品购物　新年素材　电子地图　

脚本代码 - Javascript/dom - 浏览代码 - 图片上的左右箭头上一张/下一张js代码

图片上的左右箭头上一张/下一张js代码

http://www.webkey.cn/ 2010-2-4 22:18:35 IT人家整理

<!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=utf-8" /> <title>图片上的左右箭头js代码</title> </head> <body> <img id="img1" src="/upload/remot2010/201024222338756.JPG" /><a href="http://www.webkey.cn" title="IT人家">查看更多代码</a> <script type="text/javascript"> var Util = {}; Util.Event = { stop: function(ent){ var e = ent||window.event; if (e.preventDefault){ e.preventDefault(); e.stopPropagation(); } else{ e.returnValue = false; e.cancelBubble = true; } }, add:function(elem,name,fn,useCapture){ if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || elem.attachEvent)) name = 'keydown'; if(elem.addEventListener){ elem.addEventListener(name,fn,useCapture); } if(elem.attachEvent){ elem.attachEvent("on"+name,fn); } }, getEvent:function() { if (window.event) { return this.formatEvent(window.event); } else { return this.getEvent.caller.arguments[0]; } }, formatEvent:function (oEvent) { if (document.all) { oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; oEvent.eventPhase = 2; oEvent.isChar = (oEvent.charCode > 0); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; oEvent.layerX = oEvent.offsetX; oEvent.layerY = oEvent.offsetY; oEvent.preventDefault = function () { this.returnValue = false; } if (oEvent.type == "mouseout") { oEvent.relatedTarget = oEvent.toElement; } else if (oEvent.type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } oEvent.stopPropagation = function () { this.cancelBubble = true; }; oEvent.target = oEvent.srcElement; oEvent.time = (new Date).getTime(); } return oEvent; } } function $$(element) { return document.getElementById(element); } var arrowImage1 = new Image();arrowImage1.src = "/images/prev.gif"; var arrowImage2 = new Image();arrowImage2.src = "/images/next.gif"; var NextPageTips = function(obj){ var str = new String('\ <div style="width:103px;height:27px; text-align:center;"><img id="cursorImg" style="cursor:url(transMouse.cur),auto" src="arrow001.gif" /></div>\ <div style="width:103px;height:20px; border:1px solid #ffffff;filter:Alpha(Opacity=70);-moz-opacity: 0.8">\ <div style="width:101px;height:18px;border:1px solid #000000;filter:Alpha(Opacity=60);-moz-opacity: 0.8">\ <div style="width:100%;height:100%; background:#000000; filter:Alpha(Opacity=60);-moz-opacity: 0.6">\ </div>\ </div>\ </div>\ <span id="NextPageTipsSpan" style="font-size:13px; position:relative; top:-20px;left:8px;color:#ffffff;" ></span>\ '); Util.Event.add(obj,"mousemove",function(){ var ObjectX = 0; ObjectX = Util.Event.getEvent().layerX; if($$('NextPageTips')==null) { var oDiv = document.createElement("div"); oDiv.style.position = "absolute"; oDiv.style.left = Util.Event.getEvent().pageX + "px"; oDiv.style.top = Util.Event.getEvent().pageY + "px"; oDiv.id = "NextPageTips"; oDiv.style.height="20px"; oDiv.style.width="103px"; document.body.appendChild(oDiv); $$('NextPageTips').innerHTML = str; } $$('NextPageTips').style.left = Util.Event.getEvent().pageX - 45 + "px"; $$('NextPageTips').style.top = Util.Event.getEvent().pageY + 10 + "px"; if(document.all) { Util.Event.stop(); } var image = new Image(); image.src = Util.Event.getEvent().target.src; width = image.width; if(ObjectX<Math.floor(width/2)) { $$('cursorImg').src = arrowImage1.src; $$('NextPageTipsSpan').innerHTML = "点击查看上一张"; Util.Event.getEvent().target.onclick = function(){ prePic(); } } else { $$('cursorImg').src = arrowImage2.src; $$('NextPageTipsSpan').innerHTML = "点击查看下一张"; Util.Event.getEvent().target.onclick = function(){ nextPic(); } } },false); Util.Event.add(obj,"mouseout",function(){ if($$('NextPageTips')!=null) document.body.removeChild($$('NextPageTips')); },false); }; function prePic() { if (i==0) alert('已经是第一张了'); else img.src = imgs[--i]; } function nextPic() { if (i==imgs.length-1) alert('已经是最后一张了'); else img.src = imgs[++i]; } imgs = new Array('/upload/remot2010/201024222338756.JPG','http://img.273.com.cn/200905/20090526133333.JPG','http://img.273.com.cn/200905/20090526133344.JPG','http://img.273.com.cn/200905/20090526133409.JPG'); var img = $$('img1'); img.style.cursor = "url(transMouse.cur),auto"; i = 0; img.src = imgs[i]; new NextPageTips(img); </script> </body> </html>

所属分类: Javascript/dom 所属专题: 广告图片

共有 1283 人次浏览收藏本页返回上一页责任编辑: atom

代码专题

代码搜索

站长工具/站长资源

赞助本站

娱乐生活