js如何切割圖片
A. 網頁一張圖片分割顯示 利用js還是jQ
這個一般是用CSS來顯示特定內容的。
譬如有張圖片icon.png,裡面有很多內容,便可以在CSS中這么用。
.sa {width:20px; height:20px; overflow:hidden; background:url(icon.png) no-repeat -20px -30px;}
註解:
寬度和高度是控制顯示範圍的
overflow:hidden是確保不會有多餘顯示
background:url(icon.png)是使用圖片作為背景顯示,並且也只能作為背景顯示才能達到這種做法的目的
no-repeat是不會重復,這個不是必須的,不過有會規范一些
-20px -30px是圖片的定位,顯示時會將圖片按這個坐標來定位
上面只是針對固定大小的顯示內容來定義的,如果大小不固定,在background屬性中有可能需要更改設置。不過重點是這種方式是這么使用的。
如果大小不固定,也可以這樣定義,讓背景自適應:
.sa {width:auto; height:20px; overflow:hidden; background:url(icon.png) no-repeat right bottom;}
對於圖片2(首頁標簽)的內容,也是這么使用的:
.a {width:100px; height:25px; overflow:hidden; background:url(2.png) no-repeat left center;}
.a:hover {background-position:right center;}
這樣一來,當滑鼠移到元素時,背景定位發生變化,顯示的內容便由左邊的變成右邊的了。
不過你應該對CSS這方面還不是很了解,目前可能還沒有很便捷的方式對這些CSS進行快速定義,所以也只能告訴你是這么一回事,但未必能幫得上你。
B. JavaScript 怎麼切圖
你這個需要給每張圖片定義一個編號,點擊剪頭切換圖片後,獲回取切換後圖片的編號,用答這個編號去刷新左邊縮略圖的排序
比如:
當前顯示的大圖片的編號是:20,
那麼,左邊縮略圖顯示的圖片就應該是:
20+(-2),20+(-1),20+0,20+1,20+2;
結果就是顯示編號為:18,19,20,21,22 這幾張圖片;
之所以加-2不減2,是為了可以用一個循環給算出來。
就這樣就可以了。
C. js或者jQuery裁剪圖片然後放大。
不知道你所說的圖片是不是用戶上傳的
如果是的話我有寫了一個內插件可以用
這個網址是測試用容的
https://jhinsama.github.io/demos/image-clip
這個網址有使用方法
https://github.com/Jhinsama/Jhinsama.github.io/tree/master/demos/image-clip
如果使用方法看不懂的可以直接私信我
順便說一句
這個插件支持手機網頁
D. js圖片怎麼分離問題
拆分為兩個抄函數不就襲好了
function mouseOver_a()
{
document.getElementById('a').src ="imagess/global/dring1.gif"
}
function mouseOver_b()
{
document.getElementById('b').src ="imagess/global/dring2.gif"
}
a ,b中分別調用不同的函數
或mouseOver中判斷一下event源是a 還是b ,現作處理
E. 如何使用JavaScript分割圖片完成拼圖游戲
這里有一個圖片切割效果
或許你可以參考它的原理做一個拼圖游戲
試試吧
F. 通過js來獲取從資料庫中圖片集合後,js如何將他們分割
首先放一個linkbutton上去.(去掉text,這樣就看不見) 然後用js調用linkbutton的click事件版(用自動權產生的_dopostback來調用) 在linkbutton的click事件中讀圖片,然後指定div的內容。 當然,div要runat=server了.
G. 如何在JS里將頭像圖片切割,代碼選取框鎖定為正方形Javascript(如圖,現在是自由切割,希望能鎖定)
快來解決吧
我最近的項目中也會用到!呵呵
H. css或js如何分割圖片,使瀏覽器只向伺服器請求下載圖片一次
這個不一定的,要看你也么原因了
I. 網頁一張圖片分割顯示 利用js還是jQ的
笨
笨
笨
笨
笨
笨
笨
J. 怎麼用JavaScript 控制圖片切換
這個有很多種方式,
1.選項卡:你把div換成圖片就可以使用了。只是一個思路。
<style>
.on{background:#399;color:#fff;}
.boxdiv{width:300px;height:300px;border:1pxsolid#000;display:none;}
</style>
<script>
window.onload=function(){
varoBox=document.getElementById('box');
varaBtn=oBox.getElementsByTagName('input');
varaDiv=oBox.getElementsByTagName('div');
for(vari=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
for(vari=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='on';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<divid="box"class="box">
<inputclass="on"type="button"value="aaa">
<inputtype="button"value="bbb">
<inputtype="button"value="ccc">
<divstyle="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
2.修改img的src路徑
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
varoImg=document.getElementById('img');
oBtn.onclick=function(){
oImg.src='../2.jpg';
};
};
</script>
</head>
<body>
<inputtype="button"value="clickme"id="btn"/>
<imgsrc="../1.jpg"id="img"/>
</body>