常见的筋斗云特效

最新推荐文章于 2023-09-27 10:39:24 发布
最新推荐文章于 2023-09-27 10:39:24 发布
阅读量641 收藏 1
点赞数
分类专栏： js 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dimingda/article/details/121844941
版权

提供一个筋斗云特效
在这里插入图片描述
移动时，背景变为筋斗云，鼠标离开回到起始位置，可以点击更改其实位置。
代码如下`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            background-color: beige;
            margin: auto;
            overflow: hidden;
        }
        .focus ul li {
            list-style: none;
            float: left; 
        }
        .focus ul {
            padding: 0;
            width: 1400%;
            margin: 0;
            position: absolute;
            top: 0px;
            left: 0;
        }
        .arr1, .arr2 {
            display: none;
            position: absolute;
            text-decoration: none;
            margin-top: -24px;
            top: 50%;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-family: 'icomoon';
            font-size: 18px;
            z-index: 99;

        }
        .arr2 {
            right: 0;
        }
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            list-style: none;
            width: 6px;
            height: 6px;
            background-color: rgba(0, 0,0, .4);
            border: 2px solid rgba(0, 0,0, .3);
            border-radius: 50%;
            float: left;
            margin: 0 4px;
            cursor: pointer;
        }
        .current {
            background-color: #fff;      
        }
        ol {
            position: absolute;
            bottom: 5px;
            left: 50%;

        }
    </style>
</head>
<body>
    <div class="focus">
        <a href="javaScript:;" class="arr1"><</a>
        <a href="javaScript:;" class="arr2">></a>
        <ul>
            <li>
                <a href="#"><img src="../image/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <ol></ol>
    </div>
    <script>
        // 轮播图用ul实现
        var arr1 = document.querySelector('.arr1');
        var arr2 = document.querySelector('.arr2');
        var focus1 = document.querySelector('.focus');
        var ul = focus1.querySelector('ul');
        var ol = focus1.querySelector('ol');
        var focuswidth = focus1.offsetWidth;
        var circle = 0;
        var circle1 = 4;
        function animate(obj, target, callback) {
             // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    // if (callback) {
                    //     // 调用函数
                    //     callback();
                    // }
                    callback && callback();
                }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        focus1.addEventListener('mouseenter', function() {
            arr1.style.display = 'block';
            arr2.style.display = 'block';
        })
        focus1.addEventListener('mouseleave', function() {
            arr1.style.display = 'none';
            arr2.style.display = 'none';
        })
        for(var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('index', i)
            ol.appendChild(li);
            li.addEventListener('click', function() {
                for(var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                num = num1 = index;
                circle = circle1 = index;                
                animate(ul, -index * focuswidth);

            })
        }
        ol.children[0].className = 'current';
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        var num = 0;
        arr2.addEventListener('click', function() {
            if(num == 4) {
                ul.style.left = 4 * focuswidth + 'px';
                num = 0;
            }
            num++;
            animate(ul, -num * focuswidth);
            circle++;
            if(circle == 4) {
                circle = 0;
            }
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        })
        var num1 = 4;
        arr1.addEventListener('click', function() {
            if(num1 == 0) {
                ul.style.left = 0;
                num1 = 4;
            }
            num1--;
            animate(ul, -num1 * focuswidth);
            circle1--;
            if(circle1 == -1) {
                circle1 = 3;
            }
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle1].className = 'current';
        })
        var timer1 = setInterval(function() {
            arr2.click();
        }, 2000)
    </script>
</body>
</html>
dimingda
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C3版的无缝滚动动画
奋斗小强的博客
07-27 1896
今天学习了自定义动画，做了一个小小的案例，在写案例之前需要了解以下知识点： 1.自定义动画和过渡动画的区别： 自定义动画不需要触发，过渡动画需要触发 2.过渡动画的重要属性：animation，animation 属性是一个简写属性，用于设置六个动画属性，即 animation-name：自定义动画的名称 animation-duration：动画时长 animation-timing...
菜单栏筋斗云效果
一笑的博客
10-13 990
鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <
【前端】javascript实现导航栏筋斗云效果特效
weixin_30788239的博客
10-29 343
实现效果： 　　实现效果如下图所示 实现原理： 什么是筋斗云效果： 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。 实现思路： 鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过...
把若依修改成自己想要的系统风格
最新发布
qq_46001323的博客
09-27 542
页面标题修改效果 yyc-ui/.env.development yyc-ui/public/favicon.ico 里面的标签修改效果 yyc-ui/src/assets/logo 背景图修改效果 yyc-ui/src/assets/images
普歌-原生js实现移动h5端可滑动轮播图、自动轮播（数字导航,无知识点）
普歌-高禄
07-15 1873
原生js移动h5端简单可滑动轮播图(rem适配) 很多移动端轮播图是需要这个触摸滑动的功能，js中映射就是touch、touchmove、touchend这三个事件,看看效果图 直接放代码 html <!-- 轮播图区域 --> <div id="banner-area"> <div id="banners-img"> <div class="img-area"> <img src="./images/banner
若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】
热门推荐
Start_Simple的博客
02-14 2万+
若依ruoyi修改样式
用JQuery实现筋斗云特效
06-11
这个不错啊。可以实现菜单栏中的背景提示.就是导航栏中的
筋斗云特效
m0_52861684的博客
10-11 437
鼠标在导航栏移动时，会有筋斗云图案动画跟随，增加用户体验。
0基础学前端必修课 js+c3变色轮播图
05-02 109
0基础学前端必修课 js+c3变色轮播图 <html> <head> <title>原生JS轮播</title> <meta charset="utf-8" /> <style> ...
H5C3----3D轮播图
qq_39369835的博客
03-13 560
代码： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, init
H5+CSS+JavaScript的轮播图
01-24
这是一个HTML+CSS+JavaScript的轮播图，资源改编于网络资源，侵删。
横向滚动(筋斗云特效)jQuery导航代码
09-20
横向滚动(筋斗云特效)jQuery导航代码 比较简单。
HTML实现3D轮播图
09-30
HTML实现3D轮播图,即拿即用，非常好用，有空可以欣赏一下
JavaScript实现精美个性导航栏筋斗云效果
01-19
实现效果： 　　实现效果如下图所示 实现原理： 什么是筋斗云效果： •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。 实现思路： •鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 •当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。 实现代码： 　　下面是实现代码以及详细注释，核心设置一个position为absolute的span标签，通过绑定鼠标事件，用封装好的animate动画实现span的“筋斗云”效果。 <!DOCTYPE ht
jQuery 实现仿Flash的卡通筋斗云动感菜单
05-16
内容索引:脚本资源,jQuery,仿Flash,筋斗云,jQuery动画菜单　　jQuery 实现卡通筋斗云动感菜单，仿Flash动画的效果，简要解析一下，用一张背景透明的图片实现了筋斗云人模样，然后用jquery控件这片云彩响应鼠标焦点并做弹簧缓冲运动，当你把鼠标放在任一菜单上的时候，筋斗云会立即跑过去，并做运动缓冲，形成动感十足的一个卡通菜单。
易语言标签云特效
08-21
易语言标签云特效源码系统结构:Win_Redraw,主窗口_创建,主窗口_创建子控件,主窗口_OnCommand,应用程序全局初始化,主窗口_默认窗口过程,主窗口_消息循环,主窗口_注册窗口类,Draw,CallWindowPr
jquery仿FLASH筋斗云动态菜单特效代码
03-20
jquery仿FLASH筋斗云动态菜单是一款基于jquery实现的鼠标滑过跟随的类似flash动画菜单特效。
易语言标签云的特效
08-21
易语言标签云的特效源码系统结构:主窗口_创建,主窗口_OnCommand,应用程序全局初始化,主窗口_默认窗口过程,主窗口_消息循环,主窗口_注册窗口类,CallWindowProcEx,ModifyStyle,ModifyExStyle,GetClass
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
weixin_44584059的博客
08-29 753
JS实现的动画特效:手风琴特效展示图片、筋斗云动画小知识1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）缓动动画的初级封装函数，为手风琴动画做铺垫实现效果代码HTMLCSSJS缓动动画的高级封装函数，为手风琴动画做铺垫实现效果筋斗云动画实现效果代码HTMLCSSJS 小知识 1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（） 缓动动画的初级封装函数，为手风
图像增强与特效 python 百度智能云 按钮
06-11
对于图像增强与特效，您可以使用 Python 中的第三方库，如 OpenCV 和 PIL，来实现。 以下是一个使用 OpenCV 实现图像增强和特效的示例代码： ```python import cv2 # 读取图片 img = cv2.imread('test.jpg') # 灰度化 gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 边缘检测 edges = cv2.Canny(gray, 100, 200) # 高斯滤波 blur = cv2.GaussianBlur(img, (5, 5), 0) # 保存图片 cv2.imwrite('test_gray.jpg', gray) cv2.imwrite('test_edges.jpg', edges) cv2.imwrite('test_blur.jpg', blur) # 显示图片 cv2.imshow('gray', gray) cv2.imshow('edges', edges) cv2.imshow('blur', blur) cv2.waitKey(0) cv2.destroyAllWindows() ``` 此代码将加载名为 `test.jpg` 的图像，对其进行灰度化、边缘检测和高斯滤波处理，并将结果保存到新的图像文件中。最后，它会显示处理后的图像。您可以根据需要调整参数以获得更好的效果。 对于按钮部分，您可以使用 Python 的 GUI 库来创建一个简单的窗口，并在窗口中添加一个按钮。以下是一个使用 Tkinter 库创建窗口并添加按钮的示例代码： ```python import tkinter as tk def button_click(): print('Button clicked') root = tk.Tk() # 创建按钮 button = tk.Button(root, text='Click me!', command=button_click) button.pack() root.mainloop() ``` 此代码将创建一个名为 `root` 的主窗口，并在窗口中添加一个名为 `Click me!` 的按钮。当用户单击按钮时，`button_click` 函数将被调用。您可以根据需要调整按钮的样式和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值