基本 DOM 效果 1

旧文一篇,2014年发布于前端乱炖中,是当时学习的整理,现在拿过来备份凑个篇数;

从最基础的 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 事件,鼠标在移动时,会反复触发这两个事件,这是为什么呢?

如果这篇文章对你有用,可以点击下面的按钮告诉我

0

发表回复