导航:首页 > 万维百科 > 网页图片可以拖动网页设计

网页图片可以拖动网页设计

发布时间: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>

与网页图片可以拖动网页设计相关的知识