图片分左右不同点击效果不同的处理方法
来源:互联网 发布:机械类软件 编辑:程序博客网 时间:2024/05/02 02:44
情况是这样的,图片一分为二,鼠标在图片的左边滑动时显示向左的箭头,右边就显示右边的箭头,一分为二的条件在ie下是event.offsetX<width/2,用你写的方法,测试了下,在ff,当鼠标进入图片范围不出来的话就不会改变箭头方向,希望能有办法帮我找到问题,谢谢!
<script> function upNext(event){ var img = document.getElementById("imgId"); var lefturl = document.location; var righturl = document.location; var imgurl = righturl; var width = (img.width==undefined) ? img.getAttribute("width") : img.width; var x = (event.offsetX==undefined) ? getOffset(event).offsetX : event.offsetX; function move(){ img.style.cursor = ''; if(event.offsetX<width/2){ if(lefturl != ''){ if(window.attachEvent){ img.style.cursor = 'url(images/left.cur),auto'; }else{ img.setAttribute("style","cursor:url(images/left.cur),auto;"); } } }else{ if(righturl != ''){ if(window.attachEvent){ img.style.cursor = 'url(images/right.cur),auto'; }else{ img.setAttribute("style","cursor:url(images/right.cur),auto;"); } } } } function up(){ if(event.offsetX<width/2){ if(lefturl != ''){ top.location = lefturl; } }else{ if(righturl != ''){ top.location = righturl; } } } if(window.attachEvent){ img.attachEvent("onmousemove",move); img.attachEvent("onmouseup",up); }else{ img.addEventListener("mousemove",move,false); img.addEventListener("mouseup",up,false); } } function getOffset(e){ var target = e.target; if(target.offsetLeft == undefined){ target = target.parentNode; } var pageCoord = getPageCoord(target); var eventCoord ={ x: window.pageXOffset + e.clientX, y: window.pageYOffset + e.clientY }; var offset ={ offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element){ coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } if(window.attachEvent){ document.getElementById("imgId").attachEvent("onmouseover",upNext); }else{ document.getElementById("imgId").addEventListener("mouseover",upNext,false); }</script>
- 图片分左右不同点击效果不同的处理方法
- 左右方向滚动的图片代码和<marquee>效果有点不同
- 选项卡js 改变图片的路径来实现点击和未点击的不同效果
- 点击不同的按钮把同一个表单提交到不同的页面处理的方法
- listview设置不同选项的点击效果
- 四个按钮点击出现不同的图片
- 最简单的左右滑动item实现不同效果
- listview中有按钮、图片等需要不同点击处理的控件如何处理
- CartView 图片显示不同的效果
- 左右2边背景延展不同情况下的处理
- 各个浏览器对左右反斜杠的处理方式不同。
- Bitmap.compress方法,在不同机器,不同系统上,保存出来的图片的效果和大小都会不一样
- iOS 根据不同的系统版本加载不同图片方法
- button分次点击效果不同(点击button隐藏一个视图,再次点击该视图显示,如此循环)
- Android开发 自定义ViewGroup 实现微信九格图功能(图片不同排布不同) 和 一种图片点击变暗效果
- 不同高度的图片 底部对齐方法
- 点击图片不同位置,让图片向不同方向运动。
- 按钮点击与弹出时显示不同的图片
- 常用分页函数辅助类
- java获取classpath路径
- org.hibernate.NonUniqueObjectException
- 4个数计算24点
- GPU入门------概念篇(硬件,CUDA,OPENCL)
- 图片分左右不同点击效果不同的处理方法
- 跟JBPM学习设计模式之简单工厂模式
- TextView属性小结
- Android获取手机号/手机串号 现在已经不能获取了
- 一日一点RakNet(55)--Crash Reporter(崩溃报告器)
- javascript求教高手(连数据库没问题)
- php/回顾1
- LaTeX如何设行间距为20磅
- string 和StringBuilder的引用的区别