图片 上一张 下一张 链接效果
2010-03-12 13:37
260 查看
人人网相册和酷狗音乐网站上面当鼠标移动到图片上面,鼠标的形状会根据其在图片上的位置改变。贴个实现方法:
代码
<!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>
<title>无标题页</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
.rootclass{ border:none;position:relative;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").mousemove(function(e){
var positionX=e.originalEvent.x||e.originalEvent.layerX||0;
if(positionX<=$(this).width()/2){
this.style.cursor='url("pre.cur"),auto';
$(this).attr('title','点击查看上一张');
$(this).parent().attr('href',$(this).attr('left'));
}else{
this.style.cursor='url("next.cur"),auto';
$(this).attr('title','点击查看下一张');
$(this).parent().attr('href',$(this).attr('right'));
}
});
});
</script>
</head>
<body>
<a href="#" >
<img src="11.bmp" alt="" class="rootclass" left="http://www.google.cn" right="http://www.baidu.cn" />
</a>
</body>
</html>
说明:1.需要调用Jquery。
2.这里获取鼠标在图片的位置用了个投机的方法,设置图片的position:relative
直接使用 var positionX=e.originalEvent.x||e.originalEvent.layerX||0; 来获取。
3. 为了方便直接在图片上添加left="http://www.google.cn" right="http://www.baidu.cn" 为其上一张,下一张链接地址。记得给<img />套上<a href="#" ></a>
参考:1.jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能
2.offsetX与layerX区别
3.JS在IE和FireFox之间的区别汇总
4.clientX, pageX, offsetX,x, layerX, screenX, offsetLeft
源码下载
代码
<!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>
<title>无标题页</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
.rootclass{ border:none;position:relative;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".rootclass").mousemove(function(e){
var positionX=e.originalEvent.x||e.originalEvent.layerX||0;
if(positionX<=$(this).width()/2){
this.style.cursor='url("pre.cur"),auto';
$(this).attr('title','点击查看上一张');
$(this).parent().attr('href',$(this).attr('left'));
}else{
this.style.cursor='url("next.cur"),auto';
$(this).attr('title','点击查看下一张');
$(this).parent().attr('href',$(this).attr('right'));
}
});
});
</script>
</head>
<body>
<a href="#" >
<img src="11.bmp" alt="" class="rootclass" left="http://www.google.cn" right="http://www.baidu.cn" />
</a>
</body>
</html>
说明:1.需要调用Jquery。
2.这里获取鼠标在图片的位置用了个投机的方法,设置图片的position:relative
直接使用 var positionX=e.originalEvent.x||e.originalEvent.layerX||0; 来获取。
3. 为了方便直接在图片上添加left="http://www.google.cn" right="http://www.baidu.cn" 为其上一张,下一张链接地址。记得给<img />套上<a href="#" ></a>
参考:1.jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能
2.offsetX与layerX区别
3.JS在IE和FireFox之间的区别汇总
4.clientX, pageX, offsetX,x, layerX, screenX, offsetLeft
源码下载
相关文章推荐
- jquery 图片 上一张 下一张 链接效果(续篇)
- javascript 图片上一张下一张链接效果代码
- 图片 上一张 下一张 链接效果(续篇)
- 如何在一张图片上添加多个链接 ,如何利用js做出靠右侧浮动菜单栏的效果
- android仿IOS按钮点击效果,一张图片实现
- 原生js实现照片墙的效果(拖拽图片与另一张图片交换位置)
- 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)
- 带图片闪光效果的向上滚动友情链接代码
- android view中实现一张图片的渐隐效果
- 单纯的使用一张图片,设置为 SplashScreen 的方式我已经使用过了,是有效果的,但是现在我想更进一步的显示出当前程序的状态,如正在初始化设备,这类的状态
- Android 之一张图片搞定数据加载进度条+各种颜色效果,任性的不得了
- 用CSS实现的图片透明度链接效果代码
- js图片滚动链接效果
- 一张图片实现点击效果
- 如何在一张图片上添加多个不同的链接-热点篇
- html基础 图片热点,给一张图片加多个链接
- PHP生成一张含有二维码的图片(文章末尾附代码下载链接)
- 通过BufferedImage实现将几张图片合成一张图片,图片效果类型为依次排列图片