博客分类：
javascript权威指南中例子，兼容部分浏览器；
几种不同的坐标系统
屏幕坐标描述的是桌面上的一个浏览器窗口的位置，他们相对于桌面的左上角来度量。
屏幕坐标描述的是在web浏览器中的视口德位置，他们相对于视口的左上角来度量。
文档坐标描述的是一个HTML文档中的位置，他们相对于文档的左上角来度量。
当文档比视口（往往是web页面）还要更长更宽的时候，文档坐标和窗口坐标就不相同了，在这两个坐标系之间进行转换的时候，需要考虑滚动条的位置。
(719 Bytes)
下载次数: 66
浏览: 36115 次
来自: 北京
df.format(new Date(d.getTime()
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'移动端js触摸touch详解（附带案例源码）
阅读模式：
移动端js触摸touch详解（附带案例源码）
查看：5860&
来源：php自学网&
&&& 移动端触摸滑动原理详解案例，实现过程通过添加DOM标签的触摸事件监听，并计算触摸距离，通过距离坐标计算触摸角度，最后通过触摸角度去判断往哪个方向触摸的。触摸的事件列表触摸的4个事件：touchstart&&&&& 触摸屏幕上时触发& touchmove&&& 触摸屏幕中滑动时触发& touchend&&&&&& 离开屏幕时触发& touchcancel&&& 系统取消触摸事件的时候触发监听触摸后触摸事件会实现一个event对象，这个对象里面包括3个触摸函数列表。触摸事件里的3个函数：touches&&&&& 屏幕上所有手指列表& targetTouches&&&&& 在当前DOM标签上手指的列表changedTouches&&&&& 涉及当前事件的手指的列表触摸函数的属性，用于获取坐标8个属性：clientX&& && 触摸目标在浏览器中的x坐标 clientY&&&&& 触摸目标在浏览器中的y坐标identifier& & & 标识触摸的唯一ID。 pageX&& && 触摸目标在当前DOM中的x坐标pageY&& && 触摸目标在当前DOM中的y坐标screenX&& && 触摸目标在屏幕中的x坐标screenY&&&&& 触摸目标在屏幕中的y坐标target&&&&& 触摸的DOM节点目标。Math.atan2()函数，计算角度的弧度值angel=Math.atan2(y,x)& x 指定点的 x 坐标y 指定点的 y 坐标angel是一个弧度值（可以比喻为直角三角形对角的角，其中 x 是邻边边长，而 y 是对边边长）atan2(x,y)*180/Math.PI&& 转换为角度触摸详细代码：&html&
&&&&&meta&charset=&utf-8&/&
&&&&&title&touch&test&/title&
&div&id=&box&&style=&width:100%;height:100%;border:1px&solid&&&&/div&
&&&&//定义变量，用于记录坐标和角度
&&&&var&startx,starty,movex,movey,endx,endy,nx,ny,
&&&&//开始触摸函数，event为触摸对象
&&&&function&touchs(event){
&&&&&&&&&&&&//阻止浏览器默认滚动事件
&&&&&&&&event.preventDefault();
&&&&&&&&//获取DOM标签
&&&&&&&&var&box&=&document.getElementById('box');
&&&&&&&&//通过if语句判断event.type执行了哪个触摸事件
&&&&&&&&if(event.type==&touchstart&){
&&&&&&&&&&&&&console.log('开始');
&&&&&&&&&&&&&
&&&&&&&&&&&&&//获取开始的位置数组的第一个触摸位置
&&&&&&&&&&&&var&touch&=&event.touches[0];
&&&&&&&&&&&&
&&&&&&&&&&&&&//获取第一个坐标的X轴
&&&&&&&&&&&&startx&=&Math.floor(touch.pageX);
&&&&&&&&&&&&
&&&&&&&&&&&&//获取第一个坐标的X轴
&&&&&&&&&&&&starty&=&Math.floor(touch.pageY);
&&&&&&&&&&&&
&&&&&&&&&&&&//触摸中的坐标获取
&&&&&&&&}else&if(event.type==&touchmove&){
&&&&&&&&&&&&&console.log('滑动中');
&&&&&&&&&&&&var&touch&=&event.touches[0];
&&&&&&&&&&&&movex&=&Math.floor(touch.pageX);
&&&&&&&&&&&&movey&=&Math.floor(touch.pageY);
&&&&&&&&&&&&
&&&&&&&&&&&&//当手指离开屏幕或系统取消触摸事件的时候
&&&&&&&&}else&if(event.type&==&&touchend&&||&event.type&==&&touchcancel&){
&&&&&&&&&&&&&&&&//获取最后的坐标位置
&&&&&&&&&&&&endx&=&Math.floor(event.changedTouches[0].pageX);
&&&&&&&&&&&&endy&=&Math.floor(event.changedTouches[0].pageY);
&&&&&&&&&&&&&console.log('结束');
&&&&&&&&&&&&&
&&&&&&&&&&&&&//获取开始位置和离开位置的距离
&&&&&&&&&&&&nx&=&endx-
&&&&&&&&&&&&ny&=&endy-
&&&&&&&&&&&&
&&&&&&&&&&&&//通过坐标计算角度公式&Math.atan2(y,x)*180/Math.PI
&&&&&&&&&&&&angle&=&Math.atan2(ny,&nx)&*&180&/&Math.PI;
&&&&&&&&&&&&
&&&&&&&&&&&&if(Math.abs(nx)&=1&||Math.abs(ny)&=1){
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&console.log('滑动距离太小');
&&&&&&&&&&&&}
&&&&&&&&&&&&
&&&&&&&&&&&&//通过滑动的角度判断触摸的方向
&&&&&&&&&&&&if(angle&45&&&&angle&=-45){
&&&&&&&&&&&&&&&&alert('右滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if(angle&135&&&&angle&=45){
&&&&&&&&&&&&&&&&alert('下滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if((angle&=180&&&&angle&=135)&||&(angle&=-180&&&&angle&-135&)){
&&&&&&&&&&&&&&&&alert('左滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}else&if(angle&=-45&&&&angle&&=-135){
&&&&&&&&&&&&&&&&alert('上滑动');
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&//添加触摸事件的监听，并直行自定义触摸函数
&&&&box.addEventListener('touchstart',touchs,false);
&&&&box.addEventListener('touchmove',touchs,false);
&&&&box.addEventListener('touchend',touchs,false);
&/html&最简单详细的触摸原理实例代码详解。touch demo文件下载：
扫描二维码手机查看
你可能喜欢:
发布评论：
推荐阅读：js实现获取div坐标的方法
转载 &更新时间：日 16:15:16 & 作者：Jlins
这篇文章主要介绍了js实现获取div坐标的方法,通过调用jQuery插件实现获取div元素坐标的功能,非常简单实用,需要的朋友可以参考下
本文实例讲述了js实现获取div坐标的方法。分享给大家供大家参考，具体如下：
html中最常使用的控件就是div了,那么如何获取div的坐标呢?
如下方法可以实现：
* 获取div的坐标
* @param divObj
* @returns {{width: number, height: number, left: *, top: Window}}
com.whuang.hsj.divCoordinate=function(divObj){
if(typeof divObj == 'string'){
divObj=com.whuang.hsj.$$id('divObj');
return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
'x':divObj.offsetLeft,'y':divObj.offsetTop,
'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
top:document.documentElement.scrollTop || document.body.scrollTop,
left:document.documentElement.scrollLeft || document.body.scrollLeft
com.whuang.hsj.divCoordinate()方法介绍
功能:返回div坐标;
参数:div对象或div的id(字符串);
返回值:对象,有六个属性:
width:div自身的宽度;
height:div自身的高度;
x:div左上角的坐标x;
y:div左上角的坐标y;
scrollLeft:水平滚动条的位置
scrollTop:竖直滚动条的位置
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&script type="text/javascript" src="js/jquery-1.10.1.js"&&/script&
&script type="text/javascript" src="js/common_util.js"&&/script&
&script type="text/javascript"&
function run(){
var loc=com.whuang.hsj.divCoordinate('divObj');
document.writeln();
com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+" & , & height:"+loc.height+" &, &scrollTop:"+loc.scrollTop+" &, &scrollLeft:"+loc.scrollLeft+" &,&x:"+loc.x+" &,& y:"+loc.y;
&div style="width: 599height: 499background-color:" id="divObj" &
&input type="button" value="run" onclick="run();" &
&div id="text22" style="width: 400" &
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具这篇文章主要介绍了JS在可编辑的div中的光标位置插入内容的方法,分别用js与jQuery两种方式加以实现,是非常实用的特效技巧,需要的朋友可以参考下 本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 &div contenteditable=true id=&divTest&&&/div& 通过设定contenteditable=true开启div的编辑
最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下. wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px 33.75px 0.px 67.5px 0.125 3 60px 101.25px 0.1875 备注: 1.是按照倍数关系增加的 2.手机淘宝就是按
html 锁定页面(js遮罩层弹出div效果),需要的朋友可以参考下. &htmlxmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&/& &title&UntitledDocument&/title& &scr
清空div中input标签值的方法有很多,下面为大家介绍下使用循环清空某个div中的input标签值的具体实现 HTML页面 &div class=&col-xs-9& id=&search_songs_a&& &table& &tbody& &tr& &th&钢琴曲名称:&/th& &td&&input type=&text& name=&inf
这几天 换了公司,新公司的几个页面需求是需要根据 手机屏幕大小自适应 缩放. 第一次 搞搞没有资料没有文档,居然把我一个搞过移动端的哥们都问的来懒得搭理我了 00! 大体先介绍下几个门户网站的做法 1 我最爱的网易(我最爱看评论 ) meta &!--初始页面缩放大小,禁止用户缩放--& &meta content=&width=device-width,user-scalable=no& name=&viewport&& &!--ph
这篇文章主要介绍了解决用jquery load加载页面到div时,不执行页面js的问题.需要的朋友可以过来参考下,希望对大家有所帮助 jquery代码: $(function(){ $(&#test&).load(&${contextPath}/notepad/toCreate.do&); } 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现
基本看完Sony提供的SmartWatch2的文档和Demo,仍然没有弄懂如何从手机向SmartWatch2主动发消息. 可以使用Notification从手机向SmartWatch 2主动发送消息,即:向Notification.Event.URI对应的ContentProvider中插入数据即可.虽然不是非常完美(我想发的是一个数据,比如文本.二进制流等等,而不是会让手表振动的Notification),但毕竟可以解决问题. 但如何从SmartWatch2向手机主动发送消息?没有Demo实现
img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分,下面有个不错的示例,感兴趣的朋友可以参考下 一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例: 原图: 代码实现: &div style=&width: 190 height: 100 overflow:&& &img src=&http://beijing.timeoutcn.com/UserFiles/Imag
手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的,本人亲自完成,有错误请大家指出 绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie&=10,如果网友想要的话我就去写
一直在找这方面的数据,只是之前在鬼哥那边看到,网页中使用DataURI会多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍.猜测手机端也会有类似的情况,但一直没有合适的方法来测试实际数据. mobify最近做了一系列的测试,测试结果表明平均下来,DataURI要比简单的外链资源要慢6倍. DataURI的方法最初被设计用于在email中嵌入资源,但是后来被介绍可以用于减少HTTP请求,从而提升网站性能.但是其实事实上却有些鸡肋: 图片等资源转换为DataURI所用的Base6
近些年,视频分享网站可谓是百家争鸣,百花齐放.百度视频.酷6. 56.新浪视频.激动网等都在广大网友和用户群内建立了一定的知名度.但是真正的受到广泛关注的还是优酷以及土豆网.下面这篇评测就是针对时下的流行趋势所作的评测报告. 首先,我想跟广大用户分享的信息是如果您用的2g或3g的网络,请放弃使用优酷.既费流量也看不到视频,非常不划算. 下面开始体验之旅吧! 第一部分:用户体验 一.用户界面 * 广告植入: 在首页上半部分,优酷有几个类似广告的介绍出现,而土豆网只是热门视频的置顶.如图: * 页面
手机端的文本输入受到使用环境.网络状况及设备本身条件的制约,使其用户体验的改良成为一个老生常谈的话题.如:一直在改进的输入法,新输入方式的探索(语音输入),甚至想尽种种办法去避免输入-- 文本输入本身是一个从无到有的过程,是让用户将空白的输入框填满的过程,本文避谈一些尚未经过易用性测试验证的创新设计,从本人的日常积累和实际经验出发,以文本输入框作为设计对象,从帮助用户认知及简化用户操作这两个维度来探究这些看似简单空白的小条能否生长出大智慧. 无中生有之&引导词&--帮助用户认知 手机端
现在移动开发已经是业界的一种趋势,随着时代的发展,PC机所占比例越来越小,而移动电子产品的市场份额在迅速增长,各种行业都想跻身其中,对手机端产品的需求越来越大,而电子商务网站.媒体资讯.报刊订阅更是有广大市场,出于这种趋势,各大移动开发商招式不断,但一直缺少一个独立.开源的平台让各种行业的商家各需所得,目前,有2个免费生成手机端软件的平台,我简单的介绍下: http://www.zhui.cn/ 追信魔盒 追信魔盒是免费的手机软件快速制作平台,用户无需任何技术基础.软件覆盖android.iph
这篇文章主要介绍了thinkphp判断访客为手机端或PC端的方法,通过获取用户$_SERVER['HTTP_USER_AGENT']信息后,再针对数组的遍历与匹配来判断访客类型,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了thinkphp判断访客为手机端或PC端的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 近日准备给自己的网站做一个小升级,让用户在手机二维码扫描的时候显示适合手机端来展示的模版[我用的是ThinkPHP3.0],代码是参考别人的 二.实现方法: 这里先说
自动刷新网页,自动刷新当前页面,JS调用,需要的朋友可以参考一下 reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(&刷新&) replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过&qu
js 表格排序(编辑+拖拽+缩放)实现代码,需要的朋友可以参考下. Table ID 选中 姓名 生日 备注 1 张三
杯具,全是杯具 3 李四
恩恩我魔兽技术不错 2 王五
波斯王子 时之刃还不错 4 赵六
我叫赵六 5 朱八
洗洗睡吧 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这篇文章主要介绍了简化版手机端照片预览组件的相关资料,需要的朋友可以参考下 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种?潘浚?谑亲约杭蚧?戳艘话娴恼掌?だ佬Ч??菔蔽匏醴殴δ埽?院罂赡苡锌赵偌影桑?阋部梢宰约杭酉拢?馐歉?ithub上的开源项目.它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview 下面是预览图, 使用方法案例: var photoPreview = new MobilePhoto
这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信
咨询机构易观国际发布报告称,中国移动飞信PC端和手机端整体注册账户数达1.7亿左右,但手机端用户活跃率不足两成. 易观国际Enfodesk产业数据库发布的&2009年第2季度中国手机IM市场季度监测&数据显示,2009年第2季度中国手机IM(即时通讯工具)市场累计账户数达2.5亿,而活跃账户数为8916万. 除了移动IM一定程度上替代了短信.话音等手机沟通功能这一直接原因外,易观国际认为,移动IM用户快速发展也是由于电信运营商对于移动IM产品的推动. 中国移动于2007年推出移动IM&quot
之前我们报道过&快问&和&比邻&,OOXX.com与它们类似,也是一款手机端的问答应用.不过,从产品设计上看,OOXX.com的问答更多只是一种表面形式,实质更贴近交友. OOXX.com提供iOS和Android版本(苹果App Store和谷歌Google Market正在审核中),支持新浪微博.人人网.腾讯微博登陆.与其他问答网站一样,其主要功能包括&提问&和&投票&,也就是问问题和回答. 我把OOXX.com的问答看成
很多人喜欢看书,那么再和手机结合起来就是手机看书了,虽然没有Kindle看书的效果好,我也没有见过kindle,不过看介绍说是和纸质书的效果差不多.这里主要是推荐一些在S60V3上的看书软件,当然下面几款软件都有其它版本的,如s60 v1 v2, windows mobile ,linux,有的还有iphone版本的.而一些非智能手机也提供了看电子书的功能,大部分可能看的是txt格式,少部分可以持其它格式,如umd,在moto E398上安装AnyView也可以看上umd电子书. 这六款手机端看
移动互联网的目的,是让我们随时随地的获取和发布信息. 为了达到以上的目的,我这样分一下: 能上网的时候-Web 不能上网的时候-PC 出门的时候-手机 互联网的三个终端:Web.PC.手机(包括PDA.PSP等其他手持设备),理想的情况是,用户通过任何方式,都可以轻松获取和发布信息,并且在不同终端上保持一致.每种终端都有自己的优势和劣势,互联网应用和服务的趋势是,把这些终端融合在一起. 1,Web端 尤其进入Web2.0时代,Web的优势体现的更为突出.浏览器是互联网的入口,把应用程序运行在浏览
最近在做一应用,可能需要手机端的操作,就加了个判断,根据访客所使用设备进行判断并自行跳转,相比让用户自己选择是否访问手机版,这段代码还是能改善一些用户体验的! 不多废话,直接上菜,代码如下: &?php function UserAgent(){ $user_agent = ( !isset($_SERVER['HTTP_USER_AGENT'])) ? FALSE : $_SERVER['HTTP_USER_AGENT']; return $user_ } //Mobile if
抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root,若命令提示符从$变#则为rooted: 2. 如果Android手机尚未root,可通过superoneclick或其它方法进行root处理(需要先安装Microsoft .NET Framework).Superoneclick刷root权限教程:(http://soft.shouji.com.c
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍,有需求的朋友可以参考 网上苦找2小时,全是不能兼容FF的,看来这种东西网上是搞不到现成的了,只能自己动手丰衣足食 现在发布出来,今后网上就有现成的供人使用了. 为了省事,少量位置用了jquery 改原生JS也很方便,谁需要就请自己修改了. 欢迎各位路过高人拍板,欢迎各位留言提供改进代码. 又改进 兼容了Chrome 下面的代码已修改成最新版 上源码了 &!DOCTYPE html PUBL
需求为当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能,下面是具体的实现思路及过程 基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能. 网上找了很多代码,基本都实现了鼠标悬浮之后弹出div,离开之后马上就消失了.还有些纯CSS的代码实现了这样的效果,但是对我没用,我需要的是JS的(因为我的数据还要通过Ajax取得),并且鼠标离开后不能马上隐藏,这个div上还有功能
最近用js写了一个计算器的页面.基本上使用到了,ul li的几点用法.用来布局,并且创造出了很不错的鼠标悬停效果. 关于从中学到的知识: document.getelementbyid(&ddhdh&).innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid(&ddhdh&).innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用
JS DIV layer with the hidden control and display. Page three DIV layer, three super link to realize the function is to click on a link to display the corresponding DIV layer, while the other two hidden DIV layer. Example code is as follows: Example 1
&! 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=&quo
JQuery+JS实现仿百度搜索结果中关键字变色效果代码,需要的朋友可以参考下. 1.源码 &script type=&text/javascript&& $(function() { $(&#btn_1&).click(function() { var $keyword = $(&#Text1&).val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); functio
这篇文章介绍了js 为label标签和div标签赋值的方法,有需要的朋友可以参考一下 在html中,label是没有value属性的, 他与div以及其他大部分html元素一样,有innerText和innerHTML属性 不能document.getElementByID(&test&).value=&chenhuang&; 应该是下面的 &labelid=&test&&&/label& document.getElem
这篇文章主要是对JS事件在IE与FF中的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 之道的易搜项目中的搜索分类是通过JS动态生成的,每个生成的元素都要动态的添加属性.事件.其中,添加属性可以采用赋值的方式,这对IE和FF都是适用的.比如: var element = document.createElement('select'); element.id = &myselect&; 上面的语句在IE和FF中都会有同样的效果,并且运行正常.但是我们创建的元素,
这篇文章主要介绍了使用js动态往表格的td中添加图片并注册事件,需要的朋友可以参考下 这回的小case如题,额外还有一个,当点击图片时响应事件.代码如下: &script type=&text/javascript&& function onloadEvent(){ var _td = document.getElementById(&a1&); var _img = document.createElement(&img&); _i
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: &html& &head& &title&JS+CSS实现带关闭按钮的DIV弹出窗口&/title& &script& function locking(){ document.a
这篇文章主要介绍了js实现百度联盟中一款不错的图片切换效果的方法,以完整实例形式分析了javascript操作图片切换的技巧,需要的朋友可以参考下 本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: &html& &title&js实现百度联盟中的一个不错的图片切换效果&/title& &body& &script& var links = new Array(); links[1] = &qu
如何想让页面上两个div中的滚动条(滑块)同步运动该怎实现,具体代码如下,感兴趣的朋友可以参考下 使用JQuery添加如下代码 $('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( function() { $('#source
JS在TextArea光标位置插入文字+移动光标到文字末尾,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性,具体实现如下,感兴趣的朋友可以参考下哈 =IE支持document.selection =Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 function insertText(obj,str) { if (document.selection)
这篇文章主要介绍了使用js检测浏览器是否支持html5中的video标签的方法,需要的朋友可以参考下 //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTest = document.createElement(&video&); oggTest = vidTest.canPlayType('video/ codecs=&t
JS 实现获取打开一个界面中输入的值,需要的朋友可以参考一下 需求 在一个界面中打开另一个界面,通过JS获取在另一个界面中用户输入的值. 示例: Index.html &html& &head& &meta http-equiv=&content-type& content=&text/ charset=gbk&& &title&主页&/title& &script type=&t
如何在Web页面上直接打开.编辑.创建Office文档 有朋友询问如何在Web页面上做到像SharePoint中的效果一样,能直接激活客户端的Word来打开.doc文件,而不是类似直接点击.doc文档链接时Word在IE中被打开那样.想想这个问题应该很多人都会感兴趣,所以干脆写一篇blog来大致描述一下方法. 在安装Office2003以后,有一个ActiveX控件被安装到了系统中,这个控件位于&Program Files\Microsoft Office\OFFICE11\owssupp.dl
在老项目里加些js文件和老项目的编码格式不一致出现乱码,由于两个文件都不能转格式,于是百度个不错的方法在此与大家分享下 今日遇到一个棘手的问题,在老项目里加些js文件和老项目的编码格式不一致出现乱码.老页面是GB2312,链入的js文件是UTF-8,两个文件都不能转格式. 第一个想法就是将js文件中的中文转换为unicode编码.这种做法是建立在牺牲可读性的条件下的,中文全都变成密码了. 事后想想应该还有更好的方法吧,然后就去百度,方法如下: &script type='text/javascr
本篇文章是对JS刷新框架中的其他页面以及JS刷新窗口的方法进行了汇总介绍,需要的朋友可以参考下 先来看一个简单的例子:下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: &! DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN& & & HTML
最近在正在做的会计系统实施过程中,客户要求在录入凭证分录时,实现每次录入的分录自动选中,并且如果分录在其所在的div隐藏区域时,将其滚动至显示区域.由于先前已经实现JS控制的当前行高亮显示的功能,因此,只需实现当前行的自动滚动.考虑到所有的凭证分录信息都放在div内,因此可以借助JavaScript控制div的某些属性实现,google的结果表明,将scrollTop与offsetTop.offsetHeight共同使用,可以实现此功能. 由于用户每次编辑完一条分录,系统都自动保存,因此会有保存
HT观点:作为新兴的分享类应用,响应速度快.交互性高是最基本的衡量标准.而&某天&的频繁秒退绝对会令用户体验大打折扣.instagram虽在国外风声水起,但对国内用户来说,中英文交叉的混乱影响了国内用户的使用. 本期,笔者带领大家对于图片分享类应用做一个详细的体验. 第一部分:用户体验 一.用户界面 * 页面布局: 1)重要操作是否列在首页: 对于某天,&随便看看&竟然放在了首页最后一个&我&的按钮里,非常不合理.作为一款图片分享类应用,浏览的便
上个章节讲了为什么要有交互设计,本章主要详述一下交互设计的职能--交互设计师具体做哪些内容? Ⅰ. 先了解一下交互设计的基本概念: 交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的.交互设计师通过设计用户的行为,让用户更方便更有效率的去完成产品业务目标,获得愉快的用户体验. Ⅱ.交互设计在项目流程中的位置和任务: 项目前期的流程和节点: 职能的细化就是为了让产品在每个专业环节都做到极致,提高竞争力.如果是为了走流程,每个环节都是任务式的交付,臃肿的分工除了增加成本和拖慢项目
从事前端开发的同学一定对Fiddler不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行google一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中Network面板或Firefox的HttpWatch插件的功能. 我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看.(当然,大部分情况下,你可以直接在电脑上用Ch
在iframe框架中指定div不显示,有多种实现方法,接下来与大家分享下使用js的具体实现,感兴趣的朋友可以参考下 &html xmlns=&http://www.w3.org/1999/xhtml& & &head runat=&server&& &title&测试&/title& &script language=&javascript& type=&text/javascrip
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: &input type=&button& name=&& value=&载入图片& onclick=&addImg('tt.jpg')& /& &script type=&text/javascript&& &!-- function addImg(isrc)
一个项目,包括了一个列表页其中包括在列表中实现上移,下移,删除等功能,为了用户体验,操作均使用JS实现 最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML &ul class=&clearfix&& &lt
先明白js能放在HTML的那个位置,分别是head和body中.大部分人都是放到head里面的.下面为大家介绍下放到这两个地方的区别 这个问题一直是初学者的困惑.先明白js能放在HTML的那个位置,分别是head和body中.大部分人都是放到head里面的.我学的时候也是稀里糊涂的跟着放到head的里面,也不知道为什么?今天看说说,放到这两个地方的区别: 先看一段html代码: &html& &head& &title& New Document &/title&
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.048 (s). 9 q(s)