JS跟随鼠标移动的皮卡丘特效.zip_JavaScript鼠标跟随特效资源-CSDN下载

共6个文件

js：4个

html：1个

css：1个

网页特效

jQuery特效

CSS特效

JavaScript特效

42 浏览量 2023-10-05 23:33:36 上传评论收藏 37KB ZIP 举报

在网页开发中，实现动态效果往往能够提升用户体验，让页面更具吸引力。"JS跟随鼠标移动的皮卡丘特效"就是一个典型的实例，它结合了JavaScript、jQuery以及CSS特效，为用户带来了一个互动性强、视觉效果有趣的网页元素。接下来，我们将详细探讨这个特效背后涉及的技术和知识点。 1. **JavaScript基础**： - **事件处理**：皮卡丘跟随鼠标移动的核心是监听鼠标的移动事件。JavaScript提供了`addEventListener`方法来绑定事件，如`mousemove`事件，用于捕捉鼠标在网页上的移动。 - **DOM操作**：要让皮卡丘元素（可能是图片或SVG）移动，需要通过JavaScript获取和操作DOM元素。这通常包括`getElementById`、`querySelector`等方法来选中元素，以及`style`属性来改变元素的位置。 2. **jQuery库**： - **简化DOM操作**：jQuery库简化了JavaScript的DOM操作，提供了如`$`选择器和`.css()`方法，使得改变元素样式更加方便。在这个特效中，可能用到`$(document).mousemove`来监听鼠标移动，并使用`.animate()`方法实现平滑的动画效果。 - **链式操作**：jQuery支持链式操作，可以在一个函数调用后立即调用另一个，使代码更简洁。 3. **CSS特效**： - **绝对定位**：为了使皮卡丘元素能在页面上自由移动，通常会将其CSS定位设置为`position: absolute`，然后通过JavaScript或jQuery动态修改`left`和`top`属性来改变位置。 - **过渡和动画**：CSS3的`transition`属性可以实现元素状态变化时的平滑过渡，而`animation`则允许创建复杂的动画序列。在皮卡丘特效中，可能用CSS来定义皮卡丘元素的基本样式和过渡效果。 4. **响应式设计**： - **适应不同设备**：为了确保皮卡丘特效在不同屏幕尺寸的设备上都能正常工作，需要考虑响应式设计。这可能涉及到媒体查询(`@media`)来根据屏幕大小调整CSS样式。 5. **性能优化**： - **事件节流和防抖**：当鼠标的移动事件频繁触发时，可能会导致性能问题。通过事件节流或防抖技术可以限制处理函数的执行频率，提高网页性能。在这个特效中，可能需要用到这两种策略之一来优化。 6. **跨浏览器兼容性**： - **前缀与特性检测**：不同的浏览器对某些CSS和JavaScript特性支持程度不一，因此需要考虑添加前缀（如 `-webkit-`）或者使用特性检测库（如Modernizr）来确保在多个浏览器中的兼容性。 7. **代码组织与模块化**： - **JavaScript模块**：为了保持代码结构清晰，可以将特效相关的功能封装成模块，例如使用ES6的`class`或CommonJS的`module.exports`。总结来说，"JS跟随鼠标移动的皮卡丘特效"综合运用了JavaScript、jQuery和CSS等技术，通过监听鼠标事件、动态修改元素位置和应用CSS动画，实现了趣味的互动效果。在实际开发中，开发者还需要关注性能优化、跨浏览器兼容性和代码组织，以保证特效在各种环境下的稳定性和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

JS跟随鼠标移动的皮卡丘特效.zip （6个子文件）

jiaoben8839

index.html 13KB

static

gsap-latest-beta.min.js 60KB

CustomEase3.min.js 10KB

EasePack3.min.js 2KB

script.js 3KB

css

style.css 465B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www - Pikaboo follows you</title> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <svg id="svg" viewbox="-133 0 1066 600" aria-labelledby="uniqueDescID" preserveaspectratio="xMidYMin meet" role="img"> <desc id="uniqueDescID">This Halloween Pikachu follows your mouse or screen taps</desc> <defs> <lineargradient id="lightGradient" x1="398" x2="398" y1="604" y2="148" gradientunits="userSpaceOnUse"> <stop offset="0.3" stop-color="#fff" stop-opacity="0"></stop> <stop offset="1" stop-color="#fff" stop-opacity="1"></stop> </lineargradient> <filter id="blurry" height="150%" width="150%" x="-25%" y="-25%"> <fegaussianblur in="SourceGraphic" stddeviation="2.2" result="blur"></fegaussianblur> </filter> <rect id="wallPattern" width="100" height="356" fill="#ea8731" x="0" y="0"></rect> <g id="webPattern" fill="none" opacity="0.7" stroke="#fff" stroke-miterlimit="10" stroke-width="2.83"> <line x1="579" x2="686" y1="26"></line><line x1="598" x2="686" y1="66"></line> <line x1="629" x2="686" y1="94"></line><line x1="663" x2="686" y1="107"></line> <line x1="703" x2="686" y1="112"></line><line x1="735" x2="686" y1="93"></line> <line x1="775" x2="686" y1="76"></line><line x1="803" x2="686" y1="41"></line> <line x1="805" x2="686" y1="6"></line> <path d="M588.5,23.5c0-16-6.71-29-15-29"></path><path d="M617.5,16.5c0-12.16-6.26-22-14-22"></path> <path d="M644.5,10.5c0-8.84-6.71-16-15-16"></path><path d="M610.5,56.5c0-18.24-9.84-33-22-33"></path> <path d="M632.5,42.5c0-14.37-6.71-26-15-26"></path><path d="M654.5,23.5c0-7.19-4.47-13-10-13"></path> <path d="M636.5,81.5c0-16-11.63-25-26-25"></path><path d="M650.5,58.5c0-8.84-8-16-18-16"></path> <path d="M665.5,35.5c0-5-3-12-11-12"></path><path d="M665.5,96.5c0-11-16-17-29-15"></path> <path d="M671.5,71.5c0-6.63-10-13-21-13"></path><path d="M677.5,42.5c1-3.56-7-11-13-7"></path> <path d="M697.5,78.5c-4-8-14-13-27-8"></path><path d="M701.5,103.5c-7-5-15-14-36-8"></path> <path d="M701.5,103.5c9-14,19-17,31-16"></path><path d="M697.5,76.5c3-8,14-15,22-12"></path> <path d="M693.5,50.5c2-8,9-9,15-8"></path><path d="M720.5,65.5c4-11,15-17,24-15"></path> <path d="M744.5,50.5c0-12.71,9.39-23,21-23"></path><path d="M732.5,87.5c0-13.82,11.87-23,29-23"></path> <path d="M761.5,64.5c0-14.92,14.31-27,32-27"></path><path d="M727.5,35.5c-2-8,4.92-17,11-17"></path> <path d="M708.5,42.5c3-7,10-10,19-7"></path><path d="M693.5,48.5c-1-5-10-10-17-6"></path> <path d="M738.5,18.5c-2-6,0-14,6-16"></path><path d="M765.5,27.5c-2-11,4-22,14-23"></path> <path d="M793.5,37.5c-6-13-4-27,7-32"></path><path d="M744.5,2.5c0-5.53,4-10,9-10"></path> <path d="M777.5,4.5c0-6.63,4.92-12,11-12"></path><path d="M797.5,5.5c0-6.08,3.13-11,7-11"></path> </g> <path id="batPattern" fill="#23152d" d="M-34.53,3.9c-.75-1.37,11.68-18.74,20.47-16.16C-2.87-9-2.59-.47.32-.36,2.44-.27,6.4-10.73,17-11c8-.21,17.66,14.16,17.09,14.85-.39.47-2.74-2.24-6.27-2.38-4.12-.17-6.28,4.28-8.68,4.6-2,.28-2-2.91-7-2.4C8.6,4,9.11,6.78,7.07,7.7,5.63,8.35,5.24.55-1.2,2.41c-4.21,1.22-5.15,4.75-6.53,4C-9.37,5.49-10,2.76-12,1.82a3.77,3.77,0,0,0-2.6.05c-2.15.62-4.41,4.07-5.82,4S-21.69,1.59-25.2.74C-29.51-.31-34.09,4.69-34.53,3.9Z"></path> <clippath id="backgroundClip"> <rect width="300%" height="100%" fill="#000" x="-150%" y="0"></rect> </clippath> </defs> <g id="background">  <use xlink:href="#wallPattern" x="-350"></use> <use xlink:href="#wallPattern" x="-150"></use> <use xlink:href="#wallPattern" x="50"></use> <use xlink:href="#wallPattern" x="250"></use> <use xlink:href="#wallPattern" x="450"></use> <use xlink:href="#wallPattern" x="650"></use> <use xlink:href="#wallPattern" x="850"></use> <use xlink:href="#wallPattern" x="1050"></use> </g> <g id="deco" clip-path="url(#backgroundClip)"> <use xlink:href="#webPattern" x="100" y="-10"></use> <use xlink:href="#webPattern" x="-840" y="-30"></use> <path id="deco-string" fill="none" stroke="#23152d" stroke-miterlimit="10" stroke-width="5.67" d="M-274-3c79,118,263,258.36,445,148C265,88,263,0,266,0c0,0,24,75,104.5,75.5,106.79.66,116.29-78.24,123-76,12,4,20.06,129.59,144.5,157.5,107,24,204-3,411-159"></path> <g id="eye2"> <line x1="96" y1="169" x2="96" y2="189.5" fill="none" stroke="#23152d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8.5"></line> <g id="eye2ball"> <circle cx="96" cy="207" r="17.5" fill="#fff" stroke="#23152d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5.67"></circle> <circle cx="102" cy="212" r="6" fill="#23152d"></circle> </g> </g> <g id="eye1"> <line x1="599" y1="134" x2="599" y2="154.5" fill="none" stroke="#23152d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8.5"></line> <g id="eye1ball"> <circle cx="599" cy="172" r="17.5" fill="#fff" stroke="#23152d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5.67"></circle> <circle cx="605" cy="178" r="6" fill="#23152d"></circle> </g> </g> <g transform="translate(-200, 80) rotate(120)"><use xlink:href="#batPattern"></use></g> <g transform="translate(-110, 150) rotate(110)"><use xlink:href="#batPattern"></use></g> <g transform="translate(0, 185) rotate(90)"><use xlink:href="#batPattern"></use></g> <g transform="translate(170, 145) rotate(60)"><use xlink:href="#batPattern"></use></g> <g transform="translate(235, 80) rotate(40)"><use xlink:href="#batPattern"></use></g> <g transform="translate(330, 65) rotate(130)"><use xlink:href="#batPattern"></use></g> <g transform="translate(450, 55) rotate(65)"><use xlink:href="#batPattern"></use></g> <g transform="translate(540, 95) rotate(120)"><use xlink:href="#batPattern"></use></g> <g transform="translate(690, 165) rotate(90)"><use xlink:href="#batPattern"></use></g> <g transform="translate(795, 150) rotate(75)"><use xlink:href="#batPattern"></use></g> <g transform="translate(890, 105) rotate(60)"><use xlink:href="#batPattern"></use></g> <g transform="translate(990, 40) rotate(45)"><use xlink:href="#batPattern"></use></g> </g> <g id="lamp" clip-path="url(#backgroundClip)"> <polygon id="lamp-light" opacity="0.4" fill="url(#lightGradient)" points="800 604 0 604 364 148 436 148 800 604" style="mix-blend-mode:soft-light"></polygon> <g id="lamp-2" data-name="lamp"> <ellipse cx="399.92" cy="148" fill="#fff2bd" stroke="#fff" stroke-miterlimit="10" stroke-width="2.83" rx="26.5" ry="8.5"></ellipse> <line x1="399.92" x2="399.92" y1="-16.5" y2="97.5" fill="#23152d" stroke="#23152d" stroke-miterlimit="10" stroke-width="8.5"></line> <polygon fill="#23152d" points="428.92 102 408.42 102 408.42 93 391.42 93 391.42 102 370.92 102 361.92 148 437.92 148 428.92 102"></polygon> </g> </g> <g id="pikaboo"> <g id="pikabooMain"> <path id="tail" d="M196,332c-9,2-26,12-27,7-2.19-11-2-45-10-48-4-1.49-57.6,18.18-60,31-3,16,15,52,23,52,9,0,24-26,28-25,5,1.24,3.89,18.7,9,17,6-2,25-12,40-26" fill="#fcdc55" stroke="#46777f" stroke-miterlimit="10" st

评论收藏

内容反馈