導航:首頁 > 萬維百科 > 網頁圖片可以拖動網頁設計

網頁圖片可以拖動網頁設計

發布時間:2021-02-18 00:18:43

1、網頁製作時,怎麼做到網頁圖片可以在整個頁面來回移動?

你說的這個是通過<marquee>移動技術來實現的,

2、網頁製作時,如何在網頁中拖動圖片

不可以直接拖動嗎?你可以先建立一個層,把按扭圖片放在層上,再拖動層.
你的頁面有沒有做分區?如果不行的話就做分區吧,比方說你想把按扭弄到左邊來,就在頁面里加個沒有邊框的兩列一行的表格,把按牛圖片放左邊那一列,如果想放右邊就放右邊一列,如果想放中間,就做三列,放中間,然後通過調整表格寬度來調整按牛位置.

3、網頁中如何實現滑鼠拖動圖片?

把下邊代碼存為html。把圖片換成你的路徑即可。 <!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>JS拖拽DIV</title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background-color: #C8FFFF; } </style> <script type="text/javascript"> function drag(obj) { if (typeof obj == "string") { var obj = document.getElementById(obj); obj.orig_index = obj.style.zIndex; //設置當前對象永遠顯示在最上層 } obj.onmousedown = function (a) {//滑鼠按下 this.style.cursor = "move"; //設置滑鼠樣式 this.style.zIndex = 1000; var d = document; if (!a) a = window.event; //按下時創建一個事件 var x = a.clientX - document.body.scrollLeft - obj.offsetLeft; //x=滑鼠相對於網頁的x坐標-網頁被捲去的寬-待移動對象的左外邊距 var y = a.clientY - document.body.scrollTop - obj.offsetTop; //y=滑鼠相對於網頁的y左邊-網頁被捲去的高-待移動對象的左上邊距 d.onmousemove = function (a) {//滑鼠移動 if (!a) a = window.event; //移動時創建一個事件 obj.style.left = a.clientX + document.body.scrollLeft - x; obj.style.top = a.clientY + document.body.scrollTop - y; } d.onmouseup = function () {//滑鼠放開 document.onmousemove = null; document.onmouseup = null; obj.style.cursor = "normal"; //設置放開的樣式 obj.style.zIndex = obj.orig_index; } } } </script> </head> <body> <div id="div2" style="left: 170px; background-color: #408080"> <img src="../../Content/images/1271829839604702.jpg" /> </div> <script type="text/javascript"> drag("div2"); </script> </body> </html>

4、關於html網頁里實現拖動圖片的效果

具體講起來很費勁,代碼太多,這里有個案例講解,你可以看一下
http://blog.csdn.net/java2000_net/article/details/4254525

然後這里可以下專載現屬成的效果demo,需要積分,我的正好用完了,你可以注冊後有送積分,下載看看
http://download.csdn.net/detail/aa520025/4438549

5、網頁中如何實現圖片拖動查看

只有懂一點javascript就行,要做地圖去看google maps api吧
http://www.codechina.org/doc/google/gmapapi/
這是谷歌地圖api中文內同步容文檔

6、怎麼在網頁製作拖拽的拼圖效果

如何在網頁中做一個拼圖的效果? 其實要做到這點並不困難,只需要使用到Dreamweaver一個簡單的指令。 步驟一:要找到一張完整,而且色彩鮮明的圖片。這樣便於他人識別。 步驟二:使用一些軟體將他們均勻的分割,並將他們分別命名為*.jpg或*.gif圖片。我推薦使用Friework或Photoshop。 步驟三:進入Dreamweaver打開一個相應文件。 步驟四:單擊對象工具欄中的層(Layer),在頁面中脫拽一個層。 步驟五:把滑鼠固定在層框中,同時點擊工具攔中的圖片插入按鈕,插入一張你先前分割的一張圖片。 步驟六:按鍵盤F8,彈出Behaviors面板,在Events For:。選擇IE 4.0。 步驟七:選中頁面中的層,然後單擊面板中的+鍵,系統彈出列表,選擇其中的Drag Layer。 步驟八:此時彈出的框子,選擇層(Layer)的時候時候一定選擇當前層。(如果不是很清楚,按F11)。其他的設置可以不去動他的默認。按OK。 步驟九: 隨後點擊事件右側的向下的黑色小箭頭,在彈出的列表中選擇onMouseOver。 這樣一個可以拖拽的圖象就建成了,你可以save一下。用瀏覽器打開相應的HTML文件試一試。

7、網頁設計中怎麼樣讓圖片移動

先來看下效果圖,是不是覺得心癢癢,手也開始癢癢的.那麼就跟木

木一起動手來做這個效果,GO……(PS:photoshop的版本要CS2以

上才可以)

8、網頁圖片拖拽功能的實現

document.onmousemove=function(e){
if(isDraging===true){
var nowX=e.pageX-startX;
var nowY=e.pageY-startY;
oDrag.style.left=nowX+'px';       
oDrag.style.top=nowY+'px';
 return false;  //重新抄觸發
}
}


addEventListener 有兼容問題  換document.onmousemove這種形式也可以   自己試下問題不大

9、求製作網頁中能實現頁面上隨意拉動圖片的代碼?

||<html> <head> <title>網頁特效||---能用滑鼠拖放的圖片</title> </head><body onload="init()"> <!--用<body onload="init()">替換原來的<body>--> <!--將以下代碼加入HTML的<Body></Body>之間--> <SCRIPT language=JavaScript> <!-- drag = 0 move = 0 function init() { window.document.onmousemove = mouseMove window.document.onmousedown = mouseDown window.document.onmouseup = mouseUp window.document.ondragstart = mouseStop } function mouseDown() { if (drag) { clickleft = window.event.x - parseInt(dragObj.style.left) clicktop = window.event.y - parseInt(dragObj.style.top) dragObj.style.zIndex += 1 move = 1 } } function mouseStop() { window.event.returnValue = false } function mouseMove() { if (move) { dragObj.style.left = window.event.x - clickleft dragObj.style.top = window.event.y - clicktop } } function mouseUp() { move = 0 } //--> </SCRIPT> <DIV id=block1 onmouseout=drag=0 onmouseover="dragObj=block1; drag=1;" style="HEIGHT: 90px; LEFT: 200px; POSITION: absolute; TOP: 200px; WIDTH: 90px"> <IMG alt="" border=0 src=" http://www.baidu.com/img/baidu_logo.gif" border="0" width="85" height="55"> </body></html>

與網頁圖片可以拖動網頁設計相關的知識