-2
爲什麼當我修改$(document).mousemove和$(document).mousedown到$(".desktop").mousemove和$(".desktop").mousedown時，它不會像IE和Firefox一樣運行，但在Chrome中可以正常運行。使用在HTML文件中 JavaScript文件：http://pan.baidu.com/s/1sj9fpKh 在IE和Firefox中選擇圖片失敗
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0033)http://demo.jq22.com/jquery-win7/ -->
<!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">
\t <HEAD>
\t <META http-equiv="Content-Type" content="text/html; charset=utf-8">
\t <SCRIPT src="jquery-win7_files/jq.js"></SCRIPT>
\t <SCRIPT>
\t \t (function($) {
\t \t \t $.fn.dom = function() { return this[0] ;}
\t \t })($) ;
\t \t function Pointer(x, y) {
\t \t \t this.x = x ;
\t \t \t this.y = y ;
\t \t }
\t \t function Position(left, top) {
\t \t \t this.left = left ;
\t \t \t this.top = top ;
\t \t }
\t \t function Direction(horizontal, vertical) {
\t \t \t this.horizontal = horizontal ;
\t \t \t this.vertical = vertical ;
\t \t }
\t \t $(function() {
\t \t \t var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ;
\t \t \t var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
\t \t \t $(".desktop_bg").width(clientWidth).height(clientHeight) ;
\t \t \t var oldPointer = new Pointer() ;
\t \t \t var oldPosition = new Position() ;
\t \t \t var direction = new Direction() ;
\t \t \t var div = $("<div></div>").css({
\t \t \t \t background : "blue",
\t \t \t \t position : "absolute",
\t \t \t \t opacity : "0.2"
\t \t \t }).appendTo($("body")) ;
\t \t \t var isDown = false ;
\t \t \t $(".desktop").mousedown(function(e) {
\t \t \t \t
\t \t \t \t e.preventDefault() ;
\t \t \t \t if(div.dom().setCapture) {
\t \t \t \t \t div.dom().setCapture(true) ;
\t \t \t \t }
\t \t \t \t $("ul li").css("border", "1px solid transparent") ;
\t \t \t \t isDown = true ;
\t \t \t \t oldPointer.x = e.clientX ;
\t \t \t \t oldPointer.y = e.clientY ;
\t \t \t \t oldPosition.left = e.clientX,
\t \t \t \t oldPosition.top = e.clientY
\t \t \t \t div.css({
\t \t \t \t \t left : e.clientX,
\t \t \t \t \t top : e.clientY
\t \t \t \t }) ;
\t \t \t }) ;
\t \t \t div.extend({
\t \t \t \t checkC : function() {
\t \t \t \t \t var $this = this ;
\t \t \t \t \t $("ul li").each(function() {
\t \t \t \t \t \t if($this.offset().left + $this.width() > $(this).offset().left &&
\t \t \t \t \t \t $this.offset().left < $(this).offset().left + $(this).width()
\t \t \t \t \t \t && $this.offset().top + $this.height() > $(this).offset().top
\t \t \t \t \t \t && $this.offset().top < $(this).offset().top + $(this).height()) {
\t \t \t \t \t \t \t $(this).css("border", "1px solid #90bedb") ;
\t \t \t \t \t \t } else {
\t \t \t \t \t \t \t $(this).css("border", "1px solid transparent") ;
\t \t \t \t \t \t }
\t \t \t \t \t }) ;
\t \t \t \t }
\t \t \t }) ;
\t \t \t $(".desktop").mousemove(function(e) {
\t \t \t \t if(!isDown) return isDown ;
\t \t \t \t if(e.clientX > oldPointer.x) {
\t \t \t \t \t direction.horizontal = "Right" ;
\t \t \t \t } else if(e.clientX < oldPointer.x) {
\t \t \t \t \t direction.horizontal = "Left" ;
\t \t \t \t } else {
\t \t \t \t \t direction.horizontal = "" ;
\t \t \t \t }
\t \t \t \t if(e.clientY > oldPointer.y) {
\t \t \t \t \t direction.vertical = "Down" ;
\t \t \t \t } else if(e.clientY < oldPointer.y) {
\t \t \t \t \t direction.vertical = "Up" ;
\t \t \t \t } else {
\t \t \t \t \t direction.vertical = "" ;
\t \t \t \t }
\t \t \t \t var directionOperation = {
\t \t \t \t \t LeftUp : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y),
\t \t \t \t \t \t \t top : oldPosition.top - Math.abs(e.clientY - oldPointer.y) ,
\t \t \t \t \t \t \t left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t LeftDown : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y),
\t \t \t \t \t \t \t left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t Down : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : 1,
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t Up : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : 1,
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y),
\t \t \t \t \t \t \t top : oldPosition.top - Math.abs(e.clientY - oldPointer.y)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t Right : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : 1
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t Left : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : 1,
\t \t \t \t \t \t \t left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t RightDown : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y)
\t \t \t \t \t \t }) ;
\t \t \t \t \t },
\t \t \t \t \t RightUp : function() {
\t \t \t \t \t \t div.css({
\t \t \t \t \t \t \t width : Math.abs(e.clientX - oldPointer.x),
\t \t \t \t \t \t \t height : Math.abs(e.clientY - oldPointer.y),
\t \t \t \t \t \t \t top : oldPosition.top - Math.abs(e.clientY - oldPointer.y)
\t \t \t \t \t \t }) ;
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t directionOperation[direction.horizontal + direction.vertical]() ;
\t \t \t \t div.checkC() ;
\t \t \t \t
\t \t \t }) ;
\t \t \t $(document).mouseup(function() {
\t \t \t \t if(!isDown) return isDown ;
\t \t \t \t isDown = false ;
\t \t \t \t div.width(0).height(0) ;
\t \t \t \t if(div.dom().releaseCapture) {
\t \t \t \t \t div.dom().releaseCapture(true) ;
\t \t \t \t }
\t \t \t }) ;
\t \t \t
\t \t }) ;
\t </SCRIPT>
\t <STYLE>
\t \t body{ overflow: hidden; padding: 0; margin: 0; background-color: #333333; }
\t \t ul {
\t \t \t list-style:none;
\t \t \t padding:0;
\t \t \t margin:0;
\t \t }
\t \t ul li {
\t \t \t border:1px solid transparent ;
\t \t \t padding:5px;
\t \t \t width:65px;
\t \t \t height:65px;
\t \t \t margin:10px;
\t \t \t text-align:center;
\t \t \t font:14px/16px "微軟雅黑" ;
\t \t \t color:#fff;
\t \t \t border-radius:4px;
\t \t }
\t \t .desktop {
\t \t \t position:absolute;
\t \t \t left:0;
\t \t \t top:0;
\t \t }
\t \t img {
\t \t \t border:none;
\t \t }
\t </STYLE>
</head>
<BODY>
\t <DIV class="desktop">
\t \t <UL>
\t \t <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65"
\t \t src="jquery-win7_files/a1.png"></A></LI>
\t \t <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65"
\t \t src="jquery-win7_files/a2.png"></A></LI>
\t \t <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65"
\t \t src="jquery-win7_files/a3.png"></A></LI>
\t \t <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65"
\t \t src="jquery-win7_files/a4.png"></A></LI>
\t \t <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65"
\t \t src="jquery-win7_files/a5.png"></A></LI>
\t \t </UL>
\t </DIV>
</BODY>
</HTML>
baidu.com有什麼關係？它與這個問題有什麼關係？ –
html文件將使用這個js文件 – ekse