js特效通用案例

   1 、 把当前页面内容 传到 另一个页面 方式有以下

 

方法一:方法二:

   2 、 用js判断不同浏览器

 

<script>(function () { // 检测浏览器类型 function detectBrowser() { const userAgent = navigator.userAgent; // 检查 Microsoft Edge(包含 &#39;Edg&#39; 且排除 Safari) if (userAgent.indexOf(&#39;Edg&#39;) > -1 && userAgent.indexOf(&#39;Chrome&#39;) > -1 && userAgent.indexOf(&#39;Safari&#39;) > -1) { alert(&#39;Microsoft Edge&#39;); return &#39;Microsoft Edge&#39;; } // 检查 Chrome(只包含 &#39;Chrome&#39; 且没有 &#39;Edg&#39;) if (userAgent.indexOf(&#39;Chrome&#39;) > -1 && userAgent.in...

   3 、 个容器等比缩放到另一个容器里面

 

方法 1:使用 CSS object-fit如果是要将一个内容(例如图片或视频)等比缩放,可以使用 object-fit。<div class="outer-container"> <img src="your-image.jpg" class="inner-content" /></div>.outer-container { width: 300px; /* 外容器宽度 */ height: 200px; /* 外容器高度 */ overflow: hidden; position: relative;}.inner-content { width: 100%; height: 100%; object-fit: contain; /* 等比缩放,内容完全显示在容器内 */}说明:object-fit: contain 确保内容等比缩放并完全适配容器。如果是 object-fit: cover,则内容等比缩放...

   4 、 js加载效果

 

为了实现这个效果,你可以使用HTML和CSS,同时结合一些JavaScript来动态控制加载圈圈(通常是一个旋转的图标或动画)的显示和隐藏。以下是一个简单的示例:

   5 、 js实现在当前class的父级的同级下添加容器元素

 

<script>document.addEventListener("DOMContentLoaded", function() { // 每隔1秒执行一次 setInterval(function() { // 查找符合条件的 .npc-frame-price 元素 const priceElements = document.querySelectorAll(&#39;.npc-sidebar-container .npc-heading&#39;); priceElements.forEach(function(priceElement) { // 获取父级元素的父级容器 const parentElement = priceElement.parentElement; const siblingElement = parentElement.nextElementSibling; // 检查 .crown 是否已存在 if (!siblingElement || !siblingEle...

   6 、 在产品列表中 ,当鼠标滑在某个产品时,相应产品进行轮播案例

 

在里面中.index-Product-list-lbt为轮播列,进入页面时默认内容一是显示的。如果当鼠标滑在.index-Product-list-lbt上,相应直接显示内容二,1.5秒后继续轮播下一个内容,当轮播最后一个内容时,也是接着1.5秒后又轮播第一个内容,1.5后接着下一个内容 这样循环轮播;如果当鼠标移除不滑在.index-Product-list-lbt上,又回到进入页面时默认内容一。这个js怎样实现?<style >.index-Product-Category-lbt{display: flex;flex-wrap:wrap;}.index-Product-Category-lbt .index-Product-list-lbt{width: 50%;padding:3%;height: 280px;}</style...

   7 、 码实现的效果是一个随着页面滚动而动态更新的顶部进度条或图片旋转

 

<div id="percentageCounter"></div><style type="text/css">/*顶部滚动条*/#percentageCounter{ position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%); border-radius:5px;background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: maskedAnimation...

   8 、 里面的某一个li时,就自动下滑到相应<h3></h3>里面相同的内容,这个用js怎样实现?

 

里面的某一个li时,就自动下滑到相应<h3></h3>里面相同的内容,这个用js怎样实现?<ul> <li>1.OUR SERVICES</li> <li>2.INTELLECTUAL PROPERTY RIGHTS</li> <li>3.USER REPRESENTATIONS</li> <li>4.USER REGISTRATION</li> <li>5.PRODUCTS</li></ul><h3>1.OUR SERVICES</h3><p>These Legal Terms constitute a legally binding agreement made between you, whether personaly or on behalf of an entty ("you",. and Guanazhou LC Sion Co.Ltd, concerning your access to and use ofthe revised Legal Terms by your continued use...

   9 、 利用js实现产品筛选功能带搜索案例

 

判断一如果点击.lxtype-warp .lxtype .lxtype-box .lxtype-list时,当前的.lxtype-list加个active的class类,相应.lxtype-warp .lxtype-contant是加个active的class类 显示的;始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。每当再点击其他.lxtype-warp .lxtype .lxtype-box .lxtype-list时,当前的.lxtype-list加个active的class类, 相应.lxtype-warp .lxtype-contant也是加个active的class类 显示的, 此时优先显示在第一排,始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。如果当前.lxty...

   10 、 利用js实现产品筛选功能案例

 

利用js实现产品筛选功能案例--js实现了点击显示隐藏,