Js特效大全

根据提供的文件信息，本文将对“Js特效大全”这一主题进行深入解读，主要涉及文档中的一个具体示例：漂浮元素特效（floaters）及图片切换效果。 ### 漂浮元素特效 #### 核心功能 该示例实现了一个在浏览器窗口滚动时能够跟随移动的元素集合。通过定义`floaters`类并使用`addItem`方法添加具有不同位置与内容的DOM元素，然后通过`play`方法启动动态跟踪机制，让这些元素随页面滚动而移动，达到跟随的效果。 #### 实现原理 1. **初始化**：定义`floaters`类，并通过`addItem`方法为每个元素指定ID、初始坐标和内容。 - ID用于唯一标识每个元素。 - 初始坐标决定了元素的起始位置。 - 内容是显示在页面上的文本或HTML代码。 2. **动态跟踪**： - 使用`play`方法启动定时器，每隔一定时间间隔（本例中为10毫秒）执行一次动态更新逻辑。 - 对于每一个元素，计算其相对于浏览器视口的位置差值，并根据这个差值调整元素的实际位置，使其看起来像是跟随用户滚动。 - 如果屏幕宽度小于等于800像素，则隐藏所有跟随元素，以避免在小屏设备上产生布局问题。 #### 关键代码分析 ```javascript // 定义floaters类 function floaters() { this.items = []; this.addItem = function (id, x, y, content) { // 创建并设置元素属性 document.write(`<DIV id=${id} style="Z-INDEX:0;POSITION:absolute;width:80px;height:60px;left:${(typeof(x) == 'string' ? eval(x) : x)};top:${(typeof(y) == 'string' ? eval(y) : y)}">${content}</DIV>`); var newItem = {}; newItem.object = document.getElementById(id); newItem.x = x; newItem.y = y; this.items[this.items.length] = newItem; } this.play = function () { collection = this.items; setInterval('play()', 10); } } function play() { if (screen.width <= 800) { for (var i = 0; i < collection.length; i++) { collection[i].object.style.display = 'none'; } return; } for (var i = 0; i < collection.length; i++) { var followObj = collection[i].object; var followObj_x = (typeof(collection[i].x) == 'string' ? eval(collection[i].x) : collection[i].x); var followObj_y = (typeof(collection[i].y) == 'string' ? eval(collection[i].y) : collection[i].y); if (followObj.offsetLeft != (document.body.scrollLeft + followObj_x)) { var dx = (document.body.scrollLeft + followObj_x - followObj.offsetLeft) * delta; dx = (dx > 0 ? 1 : -1) * Math.ceil(Math.abs(dx)); followObj.style.left = followObj.offsetLeft + dx; } if (followObj.offsetTop != (document.body.scrollTop + followObj_y)) { var dy = (document.body.scrollTop + followObj_y - followObj.offsetTop) * delta; dy = (dy > 0 ? 1 : -1) * Math.ceil(Math.abs(dy)); followObj.style.top = followObj.offsetTop + dy; } followObj.style.display = ''; } } // 初始化实例 var theFloaters = new floaters(); theFloaters.addItem('followDiv1', 'document.body.clientWidth - 100', 0, '<a href="图片链接" target="_blank"><img src="图片链接" width="100" height="400" border="0"></a>'); theFloaters.addItem('followDiv2', 0, 0, '<a href="图片链接" target="_blank"><img src="图片链接" width="100" height="400" border="0"></a>'); theFloaters.play(); ``` ### 图片切换效果 #### 功能描述 该特效通过切换不同大小的图片来展示不同的视觉效果。当触发某个事件（如鼠标悬停）时，大图出现，小图隐藏；反之亦然。 #### 实现原理 1. **初始化**：定义两个`div`元素，分别用于展示大图和小图。 2. **切换逻辑**： - `bigshow()`函数负责显示大图并隐藏小图。 - `bighide()`函数则相反，隐藏大图并显示小图。 #### 示例代码 ```javascript function bigshow() { document.all.div_250.style.visibility = 'visible'; document.all.div_80.style.visibility = 'hidden'; } function bighide() { document.all.div_80.style.visibility = 'visible'; document.all.div_250.style.visibility = 'hidden'; } ``` 以上就是从给定文件中提取的关键JavaScript特效知识点及其实现原理。这些特效可以广泛应用于网页设计中，提升用户体验。