您的位置：首页 > Web前端 > JQuery

Jquery实现图片上下一张

2014-04-12 14:20 387 查看

注：调试的时候发现ff下有兼容性问题,把jquery换成4.4版本就没问题了,问题应该在e.offseX上ff不支持此属性,以图片中间宽度为界限,鼠标移动在左边点击跳转到一个链接,鼠标移动右边点击跳转到另一个链接.

完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".rootclass").mousemove(function (e) {
var positionX = e.offsetX || e.layerX || 0;
if (positionX <= $(this).width() / 2) {

this.style.cursor = 'url("pre.png"),auto';
$(this).attr('title', 'pre');
$(this).parent().attr('href', $(this).attr('left'));
} else {
this.style.cursor = 'url("next.png"),auto';
$(this).attr('title', 'next');
$(this).parent().attr('href', $(this).attr('right'));
}
});
});
</script>
<style type="text/css">
.rootclass {
border: none;
position: relative;
}
</style>
</head>
<body>
<a href="#">
<img src="http://img1.gtimg.com/finance/pics/hv1/161/22/1562/101574821.jpg" class="rootclass" left="baicu.com" right="g.cn" />
</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航