html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法

本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下:

JavaScript实现文字与图片的拖拽效果

*{padding:0;margin:0;}

.tips{position:absolute;background:#eee;}

skinslogo.gif
图片可以拖动

脚本之家
拖动链接也可以

var $id=function(id){return document.getElementById(id);}

var dragF={

locked:false,

lastObj:undefined,

drag:function(obj){

$id(obj).οnmοusedοwn=function(e){

var e = e ? e : window.event;

if(!window.event) {e.preventDefault();}/* 阻止标注浏览器下拖动a,img的默认事件 */

dragF.locked=true;

$id(obj).style.position="absolute";

$id(obj).style.zIndex="100";

if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 多元素拖动需要恢复上次元素状态 */

dragF.lastObj.style.zIndex = "1";

}

dragF.lastObj=$id(obj);

var tempX=$id(obj).offsetLeft;

var tempY=$id(obj).offsetTop;

dragF.x=e.clientX;

dragF.y=e.clientY;

document.οnmοusemοve=function(e){

var e = e ? e : window.event;

if(dragF.locked==false) return false;

$id(obj).style.left=tempX+e.clientX-dragF.x+"px";

$id(obj).style.top=tempY+e.clientY-dragF.y+"px";

if(window.event) {e.returnValue=false;}/* 阻止ie下a,img的默认事件 */

}

document.οnmοuseup=function(){

dragF.locked=false;

}

}

}

}

希望本文所述对大家的javascript程序设计有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ccf命令行选项只能用c实现_CCF-201403-3-命令行选项

问题描述试题编号:201403-3试题名称:命令行选项时间限制:1.0s内存限制:256.0MB问题描述:问题描述请你写一个命令行分析程序,用以分析给定的命令行里包含哪些选项。每个命令行由若干个字符串组成,它们之间恰好由一个空格…

python data frame_Python dataframer包_程序模块 - PyPI - Python中文网

数据框尝试将任何文件加载到pandas数据帧中,以最少的配置,关注生物信息学示例通常,您将从磁盘读取文件(open(my-file.txt, rb))。但是字节流在这里更简单。>>> from io import BytesIO>>> from dataframer import datafram…

html设置页面的高度和宽度,web显示页面有图像上设置高度和宽度很重要

因此即使浏览器只有HTML,它仍然能够分配适当的空间。所以我们可以修改成以下内容:最近我们发现谷歌浏览器对图片设置有一定的修改,它主要在图像上进行设置width和设置height属性,以防止布局发生变化并改善网站访问者的体验。Web性…

lsnrctl 与 tnsnames.ora 的联系

平台:Windoxs XPOracle 11G 当使用oralce的 Net Manager创建了一个名为“L3”的Listener后,要想使用lsnrctl启动和关闭 L3 还必须在tnsnames.ora 中配置一个名为L3的条目. listener.ora L3 (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST princess…

Java EE,Docker和Maven(技术提示#89)

Java EE应用程序通常使用Maven构建和打包。 例如&#xff0c; github.com/javaee-samples/javaee7-docker-maven是一个普通的Java EE 7应用程序&#xff0c;它显示了Java EE 7依赖性&#xff1a; <dependencies><dependency><groupId>javax</groupId>…

mysql数据库计算全部女生_使用mysql存储过程-统计某个数据库下的所有表的记录数...

使用mysql存储过程-统计某个数据库下的所有表的记录数其中用到了游标(cursor)&#xff0c;循环(loop)&#xff0c;动态SQL预处理(prepare)等技术&#xff0c;特此记录一下。[sql]viewplaincopy1.CREATEPROCEDUREstatis_rows(inv_schemavarchar(50))2.BEGIN3.4.5.DECLAREsql_str…

区县级政府网站群建设要点

区县政府单位虽小&#xff0c;但行政职能齐全&#xff0c;作为服务机构&#xff0c;公民最先接触的也是区县政府&#xff0c;大部分的群众办事在区县里就可以完成&#xff1b;上级政府部门相对于区县来说&#xff0c;管理的职能要高于服务的职能&#xff0c;所以区县对公民的重…

html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...

可以跨页面使用HTML5 Web SQL数据库吗&#xff1f;(Can HTML5 Web SQL databases be used across pages?)这可能是一个非常简单的问题&#xff0c;请原谅我的无知&#xff0c;但是可以跨同一个域的页面读取Web SQL数据库吗&#xff1f;例如&#xff0c;如果我在页面上插入数据…

如何监视Java EE数据源

介绍 FlexyPool是一个开放源代码框架&#xff0c;可以监视数据源连接的使用情况。 由于我们以前缺乏对供应连接池的支持&#xff0c;因此该工具是不必要的。 FlexyPool最初是为独立环境设计的&#xff0c;并且DataSource代理配置是通过编程完成的。 使用Spring bean别名 &…

磁盘空间管理工具FolderSizes

现在的硬盘已经到了用TB来计量的级别&#xff0c;但也会感觉在不知不觉间空间竟然不够用了&#xff01;到底什么东西占用了我们这么多的磁盘空间呢? 这个软件可以帮你快速进行分析。FolderSizes 企业版是一款优秀的磁盘管理工具&#xff0c;它可以有效地帮助我们快速的查看并统…

vscode修改python终端_panda3d是python的一个高级的3D 渲染和游戏开发框架

1 介绍1.1 开发维护者:迪士尼VR工作室和卡耐基梅隆娱乐技术中心。1.2 是一个3D游戏引擎和一个 3D 渲染和游戏开发库。1.3 可以在这个框架下使用 Python 和 C 。1.4 Panda3D 是开源软件&#xff0c; 它的许可证让它可以用于任何用途&#xff0c; 包括商业用途。1.5 是python的三…

HTMl和css项目总结,HTML+CSS项目开发总结

好几天没更新博客了&#xff0c;刚实战完一个HTMLCSS的简单项目。经过几天的摸索&#xff0c;发现收益良多。之前只是单纯得写demo&#xff0c;看知识点&#xff0c;没有亲自实战项目。但实战过后才会了解&#xff0c;如何才能更好地提升自己的技术。针对这次项目开发&#xff…

Apache Camel日志组件示例

Apache Camel日志组件示例 您要将消息记录到底层的记录机制&#xff0c;请使用骆驼的log:组件。 Camel使用sfl4j作为记录器API&#xff0c;然后允许您配置记录器实现。 在本文中&#xff0c;我们将使用Log4j作为实际的记录器机制。 让我们从示例开始。 依存关系 您需要添加&am…

HDU--4768

题目&#xff1a; Flyer 原题链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4768 分析&#xff1a;二分。只需要注意到最多只有一个为奇数&#xff0c;则可以首先求出学生获得的总的传单数&#xff0c;为奇数时&#xff0c;二分找到答案。 1 #include<cstdio&…

js return的值取不到_【JS基础】隐式转换(一)

开篇JS作为一门动态语言十分灵活&#xff0c;但是伴随而来的弱类型隐式转化的问题让我们十分头疼。隐式作为一个大课题&#xff0c;很难用一个很简短的篇幅把JS的隐式转换讲解的十分清楚。所以我选择用多次少量的策略进行梳理&#xff0c;争取让你每看完一篇都会有加深对于JS隐…

html5 loaded,How do you check if a HTML5 audio element is loaded?

问题I am wanting to know how to check if a HTML5 audio element is loaded.回答1:To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onl…

Java的坏功能是什么

总览 当您第一次学习开发时&#xff0c;您会看到关于不同功能的过分笼统的陈述&#xff0c;对于设计&#xff0c;性能&#xff0c;清晰度&#xff0c;可维护性来说&#xff0c;都是不好的&#xff0c;感觉就像是黑客&#xff0c;或者他们只是不喜欢。 这可能会得到现实世界经验…

面试题(2)

逻辑推理 1、你让工人为你工作7天&#xff0c;给工人的回报是一根金条。金条平分成相连的7段 &#xff0c;你必须在每天结束时给他们一段金条&#xff0c;如果只许你两次把金条弄断&#xff0c;你如何给你 的工人付费&#xff1f;   2、请把一盒蛋糕切成8份&#xff0c;分给8…

语句 查询每个人每个科目的最高分_转行数据分析师专栏(SQL篇)-05多表查询...

数据表&#xff08;4张&#xff09;及数据情况&#xff1a;搭建数据表数据参考&#xff1a;空杯希望&#xff1a;转行数据分析师专栏&#xff08;SQL篇&#xff09;-01SQL入门​zhuanlan.zhihu.com一、表的加法1、先新建一个表course1&#xff08;和course表数据结构一致&#…

星海中学2021高考成绩查询,广东中考时间2021

忙碌了整整一个学期&#xff0c;同学们最关心的当然是什么时候能好好的回家调节一下学习的节奏&#xff0c;一起来看看广东各个大学的寒假放假时间吧&#xff01;下面是由出国留学网小编为大家整理的“2021广东各大学寒假放假时间”&#xff0c;仅供参考&#xff0c;欢迎大家阅…