在移动端用 Touch 事件以拖拽手指实现伪 hover

2015-11-02

然后有一个非常简单的方式实现

在需要的元素或者整个 body & html 根上绑定 touchstart 事件。放弃以下的蹩脚方法!

—-

前言:

  我们知道触屏设备,移动端浏览器它没有 hover 的动作效果,其次我们知道 iOS 的 Safari 与 Chrome 是不会对 hover 做出反馈的(它会在手指点击的时候瞬间执行一次 hover 效果,但随即便进入 a 标签的超链接,而假设不为 a 标签则就完全不会显示 CSS 中设定的 hover 效果),而 Android 系统下则会将触摸判断为 hover 并显示,但是它有一个严重的问题,即是 hover 状态会一直停留不取消,当我们不停的挪动手指触摸到不同位置将会看到一个非常糟糕的体验。(iOS 下的 Opera 和 搜狗 等浏览器的默认设定与 Safari 和 Chrome 不同,它的默认设定和 Android 相同)。

  以上便是这篇文章所要解决的问题,我们需要一个 hover 效果,与此同时不同的移动端浏览器或不同系统下的,使它们达到相同的交互显示效果。

正文:

  我们要实现一个怎样的 hover 效果?

  在这里的显示效果是这样的,这里的陈述将根据 iOS Safari 为基础:当我们的手指触摸到某个需要 hover 的元素,它将展示 hover 的效果(通常情况下如果触摸为点击而非拖拽挪动手指,则会直接触发 a 标签的超链接,而当我们点触的同时并挪动手指,则 a 标记的超链接则不会触发),那么我们要利用的便是这种状况,利用挪动,或者非 a 标签直接实现 hover。接着当手指松开的时候 hover 效果取消。


【触摸模块时 hover】

IMG_0636
【松开手指时 取消 hover】

  注意上面这个结果,无论在 iOS 或是 Android 它们的效果是相同的,同时“稍后观看”按是 :hover 而非我们制造的 .hover 所以 它会停留住,即便你松开了手指(因为在这里我们需要这个按钮在 hover 之后可点击),图中第1个和第3个模块是没有任何操作情况下的常态。这样就达到了一个复杂的效果。

  我们知道 js 无法直接操作 css 中的 :hover 写法,那么显然,没错,我们要自动的为触摸到的元素添加 class 使用 .hover 来塑造一个 :hover 效果。而以下我们将介绍两种情况下做这件事的方案。

  首先第一种情况,是一个完整的全新的设计时可以用的:

  此时发生的事情和 CSS 需要相应做的事是:body 中的任意标签 在 hover 与 拖拽时均会给该元素添加一个 .hover class,所以我们的 CSS 当中,将用 .hover 完全的取代 :hover(:active :focus 等保持原本写法),如此一来无论桌面系统的鼠标 hover 还是触摸时 hover 的表现结果是相同的这点不用担心。上面的代码我们分别定义了 touch 事件的 触摸 拖拽 为 添加 class,而结束时 删掉这个 class。

  第二种情况是你的项目已经开发到了比较完善的程度,此时无法完全的使用 .hover 取代 :hover(其实改改应该也不难),又或者你只希望这种动作只发生在某些特别的位置:

  以上的代码将 body * 选择器写成了 class(这是你需要指定的位置),当然的你可以指定多个 class,不同之处在于,因为你的 CSS 本身已经设定了 :hover 代码,这个时候当你将 :hover 需要效果的部分同时增加上 .hover 会造成两种同时存在的结果。所以我们需要每一个动作都有一个反向的 .no_hover,同时你需要对 .no_hover 添加上反向的 CSS 代码(即未触发 hover 时的样式 还原回效果)。

  我推荐第一种方法,但它的开销可能大一些,每次 hover 都会对 dom 进行操作,因为第二种方法需要写的 CSS 内容会多很多,但如果只是很局部的使用则第二种比较好。推荐第一种的原因在于,如果浏览器的默认设定得到了改善,到时候你只需要批量的将 CSS 中的 .hover 字样替换成 :hover 一切就会恢复成通常的方式了。

  这是非常值得尝试的一种效果,它让 Web 在触屏设备上拥有了如同 APP 一样的交互效果,不要小看它,虽然代码并不复杂,要知道越是基础的东西,越是看似简单的东西,越为重要,比起复杂炫酷的特效,我们在屏幕上操作最多的这种基本动作反而更影响体验,着显细节。

末尾:

  你恐怕要着一段代码阻止移动设备长按浏览器而弹出的菜单,这是必须的,iOS 下的代码很简单,只有一段 CSS 就可以做到,而 Android 要麻烦一些(我暂时没有找到方法 过往的 js 似乎对 Android 5.x 的 Chrome 就不起效)。如果你有对安卓的方法,请多指教。

js 禁止空值提交表单 禁止空内容搜索 禁止空格搜索

在某些情况下我们可能不希望用户在没有输入任何内容而点击搜索,或者回车搜索。

又或者,用户输入了一个,或多个空格后执行搜索。

显然,这可能会在某种情况下带来问题。

这是一个搜索示例,这个表单中只放置了我们这里需要的参数:

对应以下的代码,form 需要有 name=”search” onsubmit=”return checkpost();”

内容的 input 需要有 name=”search_text”

即以下代码的 search.search_text 部分:

如果你想提示什么东西,去掉 alert(‘内容为空’); 前的注释符即可。

这样一来即回避了空值提交表单,和完全为空格的内容提交。


2015.05.05
按照佳佳君的提示修改 / /g 为 /(^\s*)|(\s*$)/g 避免通杀,并增加一个 = 号。

js 代码立即执行 写法

当我们需要 JavaScript 载入后立即执行的时候:

注意的是,你需要立即执行,那么执行的目标对象肯定得已经载入了,不然它执行谁?

所以它写在执行目标后边。

immediately 只是单词哈。。

js 计算div滚动条高度宽度

当我们去除了 html 与 body 的 纵向 y 轴 或 横向 x 轴 的滚动条,有时候我们就这么做,比如我的博客现在的造型,以及我们经常使用的网盘,邮箱等等窗口的设计,它们无一例外的不使用 html 与 body 的滚动条,而是多个其它位置设定的 div 滚动条。

我们通常会将 div 进行定位,而后设定它的滚动条可见或自动,但是这引发一个问题,div 滚动条的高度始终是 body 的高度,我们将 div 往下挪动 200像素,结果是滚动条跑到底下去了 200像素 还未完结。而如果我们给它一个固定高度,那么用户拉扯窗口后怎么办?这个时候我们需要删除掉这多余的部分像素,并赋予一个自动计算出来的数值。

代码 意为 window.onresize 在窗口产生大小变化的时候执行,var hi = document.documentElement.clientHeight; 获取全局高度,往指定 div 输入 style 行间样式 style.height = hi – 100 + ‘px’; 高度等于全局高度减去100像素。宽度的意思雷同,你可以添加多行进行不同的控制。

但是这只在窗口产生拉伸尺寸变化的时候才修正高度,我们可能需要 window.onload 在页面在如完毕的时候也进行一次修正。不过我并不想这么做,原因是它存在一些计算上的顺序问题,有些情况框(我碰到的即是)它并不遵从这个顺序。如果可以你可以试一下,要是不出错自然最好:

如果载入完毕后执行一次高度修正在顺序和时差中存在显示结果出现问题,我推荐:

在你的页面,需要计算的最后一个 div 元素高度的后面添加这段代码,【立即执行】。这可能就解决了最后加载的时差带来的结果问题。也就是我们不用 等页面加载完执行修正计算 而是在需要计算的 div 框架载入了之后立刻修正。

这里的方案适用于窗口不多的情况(且这些 div 定位属于非绝对 或自动的),因而产生了高度差下的解决方案,像 WordPress 的后台页面大量的存在这种滚动条,或许有更好的方案,当然,它的高度很多是固定的,根本不需要控制。

js 让 pre code 代码区可编辑

之前写过禁止复制的各种方案混合(http://seabye.com/blog/10476.html),那么问题来了,当我的网站博客 code 代码部分需要用户可以复制,或可以直接在上面编辑,应该怎么做?

代码是钉子的主题中扣出来的,一段 js:

我用了高亮插件,这段代码中有 pre 和 code 两个标签将允许进入编辑状态,也就是直接在页面上编辑代码再进行复制等操作,以 ClassName 为选择:

将区域定义为某个 class 比如我这里的高亮插件的代码区 div class 为 crayon-pre,那么你可以让它变成可编辑状态,现在你将鼠标放到以上代码进行编辑就是这段 js。

自定义谷歌搜索框代码 网盘搜索框代码

从上面我们可以看到:

里面的

网页萤火虫背景特效

首先申明虽然叫萤火虫特效,但只是萤火,看不见虫子的。(截至现在我所用的模板 链接 左下角 有 萤火の光 按钮可以点击看下应用效果,当然,待会儿会有原文和 demo 地址)。另外代码肯定不是我写的,嗯,那么开始:

HTML 部分,放置于 footer 底部 body 之内就好了,是悬浮掉的不会影响布局:

jQuery 部分 里面有两个数字 75 和 25 分别是 飘动速度 与 萤火数量(太多了可能某些电脑或浏览器或手机会卡,数量建议不要太高):

CSS 部分,这是我稍微修改过的,为了配合全背景(注意 z-index: -1; 根据模板不同这个数值可能需要调整,就是 -2 -3 -? 或者 正数):


对前面的层做透明或毛玻璃处理,这样会比较有层次感,特别是手机上 dpi 高效果更好。

前端游乐场,原代码及 demo:http://codepen.io/andrewreifman/pen/vgGjb

我的截图:

WordPress 主题 seabye_air

背景图视差滚动 小段代码

我想弄个视差滚动的背景图,于是我去搜索了一大堆,但都是文件插件和各种花样 demo,其实我只是想要一个背景图视差滚动就好了,并不做复杂的东西。

于是终于找到了个只针对 背景图视差滚动 的 小段代码,body 背景图:

但是我的背景图写在了 html 上,body 作为蒙板用了,于是改成:

“0px “ 的空格去掉会导致失效;

里面的 20 是背景图滚动速度,最小值为 2,越小速度越快;

这里要注意的是 backgroundAttachment=”fixed”

原文 demo 用的是 fixed,但我的模板的情况是用 scrollbackgroundAttachment=”scroll”,如果你放上代码发现图片不跑或反着跑了,更换下这个参数看看。


题外,因为看不懂代码,是搜索到以下作为根据改成的,如果你要控制的是 html 或 body 之外的元素,类推下或许有帮助:

demo 就不弄了,即只让一张背景图和整站内容主体形成视差滚动效果(让背景图滚动的速度慢一些,下沉感)。简言之,你只需增加这段代码即可,不用改 CSS 和 HTML 部分。你懂的。


下面这位作者提供了 CSS3 的解决方案,但也是花式方案。(硬要说也有简单的部分)。但我试了下,因为用 CSS 操作我既无法在 html 和 body 标签上操作,而得另建新的 div 蒙板,这个就不弄了。不过比起 jQuery 和 js,比较新颖,也是更好的方案。

http://blog.lanceli.com/2014/08/pure-css-parallax-websites.html

禁止复制混合方案 非js与js 防复制 防拷贝

这篇文章的内容为 js 和 非js 的一些禁止复制代码,当然,是还有效的代码,对于目前的 Chrome 或 IE;同时为了更好的效果,另加一些大家会忽略的地方,例如打印模式。其次是 WordPress 在这方面的一些关联代码。

(如果你需要部分位置实现可编辑,也就是可以复制,比如你的网站做了禁止处理,但是希望 code 代码部分可操作,参考文章:http://seabye.com/blog/10902.html

首先为 js 部分,控制键盘、选中、右键,这段代码可以放到 headerjs 文件当中:

但是,一旦用户禁止了 js 的执行,例如 Chrome、Firefox 都可以很方便的禁用它,专业拷贝户可能很多都知道。

于是加入 CSS 的控制,以下可以放入 header,但是我建议 header 放一份,并将里面的内容往 CSS 文件里再放置一份,这样一来当 F12 去除了其中一个,另外一个再寻找起来会麻烦且花时间(位于 CSS 文件中的代码 对方需要在开发模式中清理 CSS 内容,而且这样可以导致整个无法直视):

另外你需要在 CSS 中再注意一点,Ctrl+P,也就是打印功能,可以唤出来,再在里面操作拷贝就没事了。因为打印很少用到,除非你的网站有专门为此而设计的。将以下代码放至 CSS 中,或者你也可以增强一下的跟上面那段 CSS 组合双保险:

但至此,还少一个,就是禁止另存为,这个现在还没有解决方案,但介于另存为之后依旧会保留代码部分,即便在本地打开另存的网页,也同样无法操作复制。另一点是 F12 开发者模式,这里就不建议禁止了,需要这么麻烦为了拷贝一段代码而研究的人,始终有方法得到内容的,只是步骤增多。

以上介绍的这些方法主要防止通过一些最简单的捷径直接右键复制的类型。足以。


下边是一些 WordPress 中我使用的,它们放置于 函数模板:

来自某个博客的简单防采集,但我没试过不知道有效没:

WordPress 可选不全文输出 RSS,但没有完全关闭的开关,以下可关闭 RSS,如果站点无需订阅功能,以此防止 RSS 方式的采集插件:

但是,还是被采集了呢?当然,即使不采集,我们加一下“转载请注明”也不错,代码会位于正文底部一同被采集,当然,采集器应该可以设定屏蔽某个特殊字段:

总的来说也不存在绝对的方案,即便你做成图片,图片文字也是可以提取的,再不成我手动输,只是增加获取的难度。

如今复制与采集当道,以上这些即为了小站的良好发展,虽只可防部分小人。原创内容被大点的站拿走之后是很郁闷的,作为作者站,文章最终在搜索引擎的排行却不如拷贝者排前,本来公开的资源回头再另一个人那里反而成为了限制资源之类的…

希望大家在推荐他人内容的时候都保留一个作者名与出处链接以示礼节,重不在价值而于方式。