script src=""/script //引用jquery
為嘉禾等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及嘉禾網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、嘉禾網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
script src=""/script //引用jquery ui
script
$(function () {
$("#draggable").draggable(); //draggable為ui中的拖動(dòng)方法
});
/script
img id="draggable" src="a1.jpg" width:100px; height:100px; /
這樣行不??
這種插件非常多, 你可以挑一個(gè)用
如果你要問(wèn)原理, 關(guān)鍵點(diǎn)是
外層div是一個(gè)窗口, 控制好長(zhǎng)寬, 設(shè)置overflow為hidden, 那么只有在此區(qū)域內(nèi)的內(nèi)容才會(huì)被顯示
內(nèi)容是一堆圖片, 通過(guò)js控制位置, 比如用relative定位, 通過(guò)css控制left, 就是移動(dòng)效果
如果要輪播, 注意控制邊界圖片次序
應(yīng)該是你的圖片層寫(xiě)的有問(wèn)題吧,圖片層開(kāi)始時(shí)默認(rèn)顯示圖片1,其他不顯示,之后隨數(shù)字的切換而變化。我看你代碼上圖片的部分直接什么都沒(méi)有處理啊。
script
$(function(){
$(".num li").hover(function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:;');
},function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:none;');
});
});
/script
/head
body
div class="container"
ul class="picture" style='display:;'
li class="focus" id=d1img src="images/01.gif"http://li
li class="focus" id=d2 style='display:;'img src="images/02.gif"http://li
li class="focus" id=d3 style='display:;' img src="images/03.gif"http://li
/ul
ul class="num"
li id=i11/li
li id=i22/li
li id=i33/li
/ul
(function($){
})(jQuery)
用這個(gè)包起來(lái)。
原因如下:
1 首先(function(){})()這種寫(xiě)法 是創(chuàng)建了一個(gè)匿名的方法并立即執(zhí)行(function(){})這個(gè)是匿名方法后面的括號(hào)就是立即調(diào)用了這個(gè)方法)。
這樣做可以創(chuàng)建一個(gè)作用域以保證內(nèi)部變量與外部變量不發(fā)生沖突,比如$ jQuery 等jquery內(nèi)部定義的變量。
2 (function($){})(jQuery) 這個(gè)寫(xiě)法主要的作用還是保證jquery不與其他類庫(kù)或變量有沖突 首先是要保證jQuery這個(gè)變量名與外部沒(méi)有沖突(jquery內(nèi)部$與jQuery是同一個(gè)東西 有兩個(gè)名字的原因就是怕$與其他變量名有沖突二jQuery與其他變量沖突的幾率非常?。┎魅肽涿麑?duì)象,匿名對(duì)象給參數(shù)起名叫做$(其實(shí)和jquery內(nèi)部是一樣的) 然后你就可以自由的在(function($){})(jQuery)里寫(xiě)你的插件而不需要考慮與外界變量是否存在沖突
'position':absolute?里的?absolute要加單引號(hào),?因?yàn)樗皇亲兞俊?/p>
然后能實(shí)現(xiàn)跟隨鼠標(biāo)了?但不是不是太精確??因?yàn)槟愕膖op和left?都是e.pageY,left應(yīng)該是e.pageX
然后mouseover是鼠標(biāo)移入觸發(fā),不是實(shí)時(shí)觸發(fā),要實(shí)時(shí)跟隨鼠標(biāo),換成mousemove即可
$("body").mousemove(function(e){
if($("#mouseXY").html()?==?null){
var?MouseXY?=?"div?id='mouseXY'img?src='未標(biāo)題-1.png'//div"?;
$("body").append(MouseXY);
}
$("#mouseXY").css({'top':e.pageY,'left':e.pageX,'position':'absolute','z-index':1});
});