基本 DOM 效果 1
发布在DOM效果2014年7月17日view:2519
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

从最基础的 DOM 效果开始,作为自己的笔记,和大家分享一下。
本文的效果主要有 Tab选项卡、拖拽和放大镜。

1、Tab页 / 选项卡效果 – 这是最基本最常用的 DOM 效果之一了

1.1、普通写法: 点击查看效果

1.2、优化写法: 点击查看效果

    嫌麻烦就不要跳转过去看了,不是很复杂,两句话的事儿

    普通写法 : 点击一个标题,移除所有标题的选中样式,给当前点击的标题加选中样式;隐藏所有内容div,显示当前内容div。

    优化写法:点击一个标题,移除上一个选中标题的选中样式,给当前点击的标题加选中样式;隐藏上一个显示的内容div,显示当前的内容div。较普通写法,少了循环标题和内容进行重置的过程,减少了很多 DOM 操作。

1.3、纯CSS实现:不考虑浏览器的兼容性,用CSS3中新增的伪类:target处理
点击查看效果
当然这只算是一个概念性的东西,真正实现起来还要考虑很多细节问题,很难用到实际项目中。

2、拖拽效果
点击查看效果

代码中用到了一组方法 setCapture / releaseCapture,
这是IE独有的一组方法,该组方法只能由 DOM 对象调用,不能由 document 调用;使用最多的情况,是在拖拽上。

setCapture : 捕获所有的鼠标事件,只执行当前的事件。经测试,IE9 及其以下的浏览器中,浏览器上所有的鼠标事件均失效,就连工具栏、收藏夹、右上的关闭按钮也点不了;IE10 里就没什么效果了。
releaseCapture : 释放掉当前的setCapture效果

升级问题:
2.1、限制拖动的小块,不能出浏览器视口;
2.2、当拖动小块接近一个边框时,加上吸附效果
我把这两个效果放到了一块儿,点击查看

3、放大镜效果
点击查看效果
基本原理如下:
放大镜原理图


??遇到个问题:给图片加鼠标的 mouseover 和 mouseout 事件,鼠标在移动时,会反复触发这两个事件,这是为什么呢?

bg:回北京一周多了,第一家公司面试失败;想进家大点儿的公司这么难呢,怎么!
我的工作经验和能力还是没能弥补学历上的缺陷 -- 至少表现出来是这样。
妈蛋,还是不够强,能力要是真高,谁管你什么学历,真该早点儿转前端啊。

评论
发表评论
暂无评论
WRITTEN BY
蛋蛋超人
向钱看 向厚赚 一切都与钱相关!追求卓越 成功会在不经意间追上你!追寻自由,活得更自私些!
TA的新浪微博
PUBLISHED IN
DOM效果

如专栏名称所示,各种DOM效果

我的收藏