『壹』 js滾動圖片的時候如何控制裡面圖片的大小
我這有一個不間斷向左滾動的代碼，很好用的，你可以試試看
<div id="Demo_t0" style="overflow:hidden;width:730;height:182;">
<table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td align="center" valign=top id=Demo_t1><table width=" 0" height="136" border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td width=" 0" align="center" valign="middle">滾動內容</td>
</tr>
</table></td>
<td width="1" valign=top id=Demo_t2></td>
</tr>
</table>
</div>
<script language="javascript">
var Demo_speed=30
Demo_t2.innerHTML=Demo_t1.innerHTML
function Demo_Marquee(){
if(Demo_t2.offsetWidth-Demo_t0.scrollLeft<=0)
Demo_t0.scrollLeft-=Demo_t1.offsetWidth
else{
Demo_t0.scrollLeft++
}
}
var Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)
Demo_t0.onmouseover=function() {clearInterval(Demo_MyMar)}
Demo_t0.onmouseout=function() {Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)}
</script>
注意數值的修改：
width:730;height:182 這個是滾動范圍的寬與高的范圍
speed=30 是滾動速度的設置，數值越小，速度越快。
代碼說明：
可設置一個一行一列的表格，然後將要滾動的圖片依次上傳到該圖片中。然後將這段所生成的代碼，在滾動代碼中，將「滾動內容」幾個字替換。 可以試一試
『貳』 js中如何拖動DIV中的圖片
代碼放出來看抄看
是不是冒襲泡和捕獲的問題
試試簡單的，看看點擊圖片時 div上的onclick事件有沒有被觸發
// 看起來是使用 jquery ,代碼貼完整些吧，
this.mousedown(function(){
中this是指向什麼對象都沒看出來
//加一個 return false
//另外 event.offsetX 並不兼容 firefox
$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");
return false;
}
})
『叄』 js手機網站觸摸下拉圖片放大
這是一個叫photoswipe的插件,挺好用的,平滑滑動,上一張下一張,點擊放大等功能
這是我自己精簡了一下的.裡面有Demo,你自己看吧.
『肆』 網頁js怎麼控制圖片拖動范圍，圖片是可以放大縮小的
嗯
控制圖片的長和寬來控制圖片的大小。
一般開始時用代碼獲取圖片的長和寬然後用DIV
載入
居中顯示
『伍』 js如何實現滑鼠滾輪縮放圖片並且可以局部方法拖拽查看
縮小時獲取圖片寬高 var h = ...,w=...;然後再對寬高做一個限制就可以了
『陸』 原生JS，實現圖片可拖拽，並且移動四個角和四條變能夠自由變換圖片大小
見證奇跡的時刻到了：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<style>
*{
margin:0;
padding:0
}
.box{
position:absolute;
top:100px;
left:100px;
}
/*四邊*/
.box.t,
.box.b,
.box.l,
.box.r{
position:absolute;
z-index:1;
background:#666;
}
.box.l,
.box.r{
width:10px;
height:100%;
cursor:col-resize;
}
.box.t,
.box.b{
width:100%;
height:10px;
cursor:row-resize;
}
.box.t{
top:0;
}
.box.b{
bottom:0;
}
.box.l{
left:0;
}
.box.r{
right:0;
}
/*四角*/
.box.tl,
.box.bl,
.box.br,
.box.tr{
width:20px;
height:20px;
position:absolute;
background:#CCC;
z-index:2;
cursor:nwse-resize
}
.box.tl,
.box.bl{
left:-5px;
}
.box.tr,
.box.br{
right:-5px;
}
.box.br,
.box.bl{
bottom:-5px;
}
.box.tl,
.box.tr{
top:-5px;
}
.box.tr,
.box.bl{
cursor:nesw-resize;
}
/*圖片*/
img{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
varoDiv=document.getElementsByTagName('div')[0];
oDiv.style.width='500px';
varaSpan=oDiv.getElementsByTagName('span');
for(vari=0;i<aSpan.length;i++){
dragFn(aSpan[i]);
}
functiondragFn(obj){
obj.onmousedown=function(ev){
varoEv=ev||event;
varoldWidth=oDiv.offsetWidth;
varoldHeight=oDiv.offsetHeight;
varoldX=oEv.clientX;
varoldY=oEv.clientY;
varoldLeft=oDiv.offsetLeft;
varoldTop=oDiv.offsetTop;
document.onmousemove=function(ev){
varoEv=ev||event;
if(obj.className=='tl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='bl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='tr'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='br'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='t'){
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='b'){
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.bottom=oldTop-(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='l'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
}
elseif(obj.className=='r'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
}
};
document.onmouseup=function(){
document.onmousemove=null;
};
returnfalse;
};
}
};
</script>
</head>
<body>
<divclass="box">
<spanclass="r"></span>
<spanclass="l"></span>
<spanclass="t"></span>
<spanclass="b"></span>
<spanclass="br"></span>
<spanclass="bl"></span>
<spanclass="tr"></span>
<spanclass="tl"></span>
<imgsrc="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/730-350-0.jpg">
</div>
</body>
</html>
『柒』 關於 js改變圖片大小的問題
這個，用JS不可能實現的。圖片改變了大小，它的像素也發生了變化，被拉伸失真。
『捌』 如何利用JS或者CSS樣式來自動調整圖片大小
js版和css版自動按比例調整圖片大小方法，分別如下：
<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
『玖』 js拖動圖片的問題
這是瀏覽器插件的問題，得先知道是什麼插件.....可以去看一些比較成熟的HTML5站，比如WEBQQ的拖拽，是不是也有這個問題。
『拾』 js 控制圖片大小
img=...;//獲取單個img的引用,前面用getElementsByTagName獲取了,這里就不寫循環了
//只寫單個圖片的處理
var pnode=img.parentNode; //img的父節點
var div=document.createElement('div'); //創建一個div用作容器
div.style.overflow='hidden';//overflow和display的設置可單獨寫個樣式,就不需要這2行設置的代碼了
div.style.display='inline-block';
div.style.width=img.offsetWidth+"px";//設置大小
div.style.height=img.offsetHeight-100+"px";
pnode.insertBefore(div,img); //將div插入到圖片前面
pnode.removeChild(img); //將圖片移動到div中
div.appendChild(img); //
動態創建了一個和圖片同寬,高度比圖片小100像素的層,插入到圖片前面,然後把圖片移進去,這是我的想法
在運行的時候需要保證圖片載入完成,以及圖片不是隱藏的. 還有就是圖片高度至少要在100PX以上吧,如果不確定,可在高度設置之前進行判斷