javascript 圖片上一張下一張鏈接效果代碼
更新時間：2010年03月12日 18:49:03 作者：
人人網(wǎng)相冊和酷狗音樂網(wǎng)站上面當鼠標移動到圖片上面，鼠標的形狀會根據(jù)其在圖片上的位置改變。
貼個實現(xiàn)方法：
代碼
<!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.需要調(diào)用Jquery。
2.這里獲取鼠標在圖片的位置用了個投機的方法，設(shè)置圖片的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>
在線演示代碼:http://demo.jb51.net/js/img_left_right/jquery_img_lr.htm
打包下載地址 http://www.fzitv.net/jiaoben/25129.html
相關(guān)文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
javascript offsetX與layerX區(qū)別
jQuery 點擊圖片跳轉(zhuǎn)上一張或下一張功能的實現(xiàn)代碼
代碼
復(fù)制代碼 代碼如下:
<!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.需要調(diào)用Jquery。
2.這里獲取鼠標在圖片的位置用了個投機的方法，設(shè)置圖片的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>
在線演示代碼:http://demo.jb51.net/js/img_left_right/jquery_img_lr.htm
打包下載地址 http://www.fzitv.net/jiaoben/25129.html
相關(guān)文章:
clientX,pageX,offsetX,x,layerX,screenX,offsetLef
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
javascript offsetX與layerX區(qū)別
jQuery 點擊圖片跳轉(zhuǎn)上一張或下一張功能的實現(xiàn)代碼
相關(guān)文章
很多朋友都知道通過靜態(tài)html+css可以創(chuàng)造出很多的頁面效果,本文所講的就是html+css模擬書本翻頁效果,還是很不錯的,需要的朋友可以參考下2023-03-03
javascript動態(tài)改變img的src屬性圖片不顯示的解決方法
最近寫了幾句javascript程序代碼，涉及到了動態(tài)改變圖片的效果，結(jié)果在ie下顯示不出了來，實在是郁悶，上網(wǎng)找尋結(jié)果，終于發(fā)現(xiàn)了，原來是 瀏覽器的問題?，F(xiàn)在將方法貼出來分享。2010-10-10
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果（pp原創(chuàng)）
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果（pp原創(chuàng)）2008-10-10
javascript圖片自動縮放和垂直居中處理函數(shù)
非常不錯的應(yīng)用代碼，方便我們處理一些圖片效果2008-10-10
網(wǎng)上有不少圖片滾動的效果代碼，但大多兼容性不好，或者結(jié)構(gòu)混亂，xhtml，css，js 均沒有得到良好的優(yōu)化。2010-06-06
圖片放大效果實現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
奇妙的Javascript圖片放大鏡...2006-07-07
左右圖片循環(huán)滾動停頓一下后繼續(xù)...2006-07-07
今日發(fā)現(xiàn)qq的圖片輪換效果代碼不錯，兼容多瀏覽器，測試了ie和firefox效果不錯2008-06-06
為了阻擋一般用戶不能使用圖片另存為的功能，這里使用JavaScript對右鍵菜單做了限制，當在圖片上點擊右鍵的時候，會彈出一個提示，提示無法操作圖片，注意，這種方法對高手可能無效果。2009-10-10