javascript完美实现图片拖动改变顺序

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">&l…

javascript 实现图片拖动

javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标注意事项要给图片的位置属性设为fixed或者absolute,并且要图片复制初始的left和top属性代码如下 <!DOCTYPE html> <html> <head> <meta content="text/html;c…

JavaScript修改Canvas图片

用JavaScript修改Canvas图片的分辨率(DPI) 应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭.…

用javascript协助导入图片

用javascript协助导入图片需求先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大家将随手拍的生活中的图片分享上去.每天编辑还会选出一张最有特色的图片,刊登到<成都商报>上. 快拍成都版块的网址是:http://photo.chengdu.cn/diary.php,另外,这个成都图片网还带有一个 " 拍客论坛 ",论坛的网址是:http://photo.ch…

JS控制图片拖动放大缩小旋转支持滚轮放大缩小 IE有效

<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/javascript"> /*滚轮事件*/ var scrollFunc=function(e) { e=e || window.event; if(e.wheelDelta) { if(e.wheelDelta…

JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slider,出来的结果都是关于滑动块的,最后搜索resize bar才找到正确的结果.解决方案:jsfiddle的一个示例 http://jsfiddle.net/gaby/Bek9L/186/以上示例能实现滑动效果,但是当鼠标移动到右侧的iframe时,鼠标移动时 $(document).mousemo…

Android：图片中叠加文字，支持拖动改变位置

之所以做了这么一个Demo,是由于近期项目中有一个奇葩的需求:用户拍摄照片后,分享到微信的同一时候加入备注,想获取用户在微信的弹出框输入的内容.保存在自己的server上.而其实,这个内容程序是无法获取的,因此採取了一个折衷方案,将文字直接写在图片上. 首先上Demo效果图: 功能: 1.用户自由输入内容,可手动换行,而且行满也会自己主动换行. 2.可拖动改变图片中文本位置(文字不会超出图片区域). 3.点击"生成图片"button之后,生成一张带有文字的图片文件. 代码不多,直接所有…

借助JavaScript中的Dom属性改变Html中Table边框的颜色

借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页面标题卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript&quo…

借助JavaScript中的时间函数改变Html中Table边框的颜色

借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>霓虹灯效果的边框</title> <script language="javascript"> var i=0; var Co…

jQuery实现鼠标拖动改变Div高度

最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 直接上代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"…

ImageView设置点击效果没有用？ImageView src的图片大小改变不了？

ImageView设置点击效果没有用? 解决 1.ImageView xml里面必须clickable 和longClickable为true <ImageView android:layout_width="@dimen/x90" android:layout_height="@dimen/x90" android:padding="@dimen/x26" android:layout_gravity="right|center…

每天一个JavaScript实例-推断图片是否载入完毕

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>每天一个JavaScript实例-推断图片是否载入完毕</title> <script> window.onload= function(){ //clearTimeout(clock); alert("载入完毕"); } v…

javascript的预编译和执行顺序

原文:javascript的预编译和执行顺序最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题代码: 代码一<html> <head> <title>事件处理</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script typ…

html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切

众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键 oncontextmenu="return false" 禁止复制和剪切: oncopy="return false;" oncut="return false;" 禁止复制 onselectstart="return false" 禁止图片拖动 ondragstart="return false&q…

javascript仿新浪微博图片放大缩小及旋转效果

javascript仿新浪微博图片放大缩小及旋转效果经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以用html5中的canvas画布来解决. 思路:1.点击小图后,小图隐藏掉,在小图父级元素后增加一张大图且显示出来. 2.点击往左转,往右转触发旋转方法. 3. 点击收起按钮,把1的步骤反过来隐藏大图显示小图. 4. 点击查看原图功能目前没有做成js灯箱效果,直接打开一个新连接.但是如果想做成…

JAVASCRIPT+DHTML实现表格拖动

自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂, 要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着! <html> <style> body{ font-size:9pt; } table,th,td{ font-size:9pt; } .lsitTalbe{ table-layout:fixed; width:30%; border-collapse:collapse; border-color:#507010; co…

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将…

特殊例子--JavaScript代码实现图片循环滚动效果

<!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> <meta http-equiv="Content-…

JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数:1258 JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰…

Javascript实现的图片隐写术

javascript图片隐写术,感觉可以用它来干点有想法的事情 1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容.”,图片隐写术简而言之就是利用图片来隐藏某些数据,让人一眼看去以为是很普通很正常的图片,但其实里面隐藏着某些“机密”数据. 据传911事件里,KB份子就是通过黄色图片来传递信息而躲过了FBI的监控.还有大众点评也是通过图片隐写术来保护自身合法权益.所以图片隐写术是一…

完美png图片添加水印类

完美png图片添加水印类被添加水印图片和水印图片都可以是png,保证透明无色背景,可调节透明度 <?phpclass Imgshuiyin{ /* 缩略图相关常量定义 */ const THUMB_SCALING = 1; //常量,标识缩略图等比例缩放类型 const THUMB_FILLED = 2; //常量,标识缩略图缩放后填充类型 const THUMB_CENTER = 3; //常量,标识缩略图居中裁剪类型 const THUMB_NORTHWEST = 4; //常量,标识缩略…

Javascript实现让图片一直跟着鼠标移动

Javascript实现让图片一直跟着鼠标移动注意:图片可能加载不出来,还请及时更换图片 <!doctype html> <html> <head> <meta charset="utf-8"> <title>永恒之月</title> <style> body { margin: 0; padding: 0; height: 3000px; /*让滚动条出现*/ } img{ /*一定要positio…

javaScript & jquery完美判断图片是否加载完毕

好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ------------------------------------------------------------- 众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例…

javascript马赛克遮罩图片切换效果:XMosaic.js(转)

新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2.js一样,都是用来制作单张图片切换特效的javascript类,不过,迄今为止XMosaic.js实现的特效是最炫的,炫到我以后很长一段时间都不用再写图片切换类了. XMosaic.js,马赛克图片切换特效示例页 XMosaic.js的使用方法请查看示例页源代码.其中html结构与一般图片切换的h…