js弧形菜单

最新推荐文章于 2024-05-08 14:40:55 发布
最新推荐文章于 2024-05-08 14:40:55 发布
阅读量525 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44143279/article/details/111871941
版权

实现效果:
在这里插入图片描述

js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片弧形展示轮播切换js代码</title>
</head>

<body>
    <script src="/demos/googlegg.js"></script>

    <style type="text/css">
        img {
            border: 0;
        }
        
        li {
            list-style: none;
        }
        
        .user_callback #user_pic {
            position: relative;
            overflow: hidden;
            height: 450px;
            width: 1200px;
            z-index: 2;
            margin: 0 auto;
        }
        
        .user_callback #user_pic ul {
            width: 990px;
            height: 285px;
            position: relative;
            top: 20px;
            left: 105px;
        }
        
        .user_callback #user_pic ul li {
            position: absolute;
        }
        
        .user_callback #user_pic ul img {
            position: relative;
            top: 0;
            left: 0;
        }
        
        .user_callback #user_pic ul .user_pic1 {
            top: -285px;
            left: -231px;
            z-index: 0;
        }
        
        .user_callback #user_pic ul .user_pic2 {
            top: -23px;
            left: -99.5px;
            z-index: 2;
        }
        
        .user_callback #user_pic ul .user_pic3 {
            top: 66px;
            left: 68px;
            z-index: 3;
        }
        
        .user_callback #user_pic ul .user_pic4 {
            top: 110px;
            left: 247.5px;
            z-index: 4;
        }
        
        .user_callback #user_pic ul .user_pic5 {
            top: 110px;
            left: 495px;
            z-index: 3;
        }
        
        .user_callback #user_pic ul .user_pic6 {
            top: 66px;
            left: 695.5px;
            z-index: 2;
        }
        
        .user_callback #user_pic ul .user_pic7 {
            top: -23px;
            left: 852px;
            z-index: 1;
        }
        
        .user_callback #user_pic ul .user_pic8 {
            top: -285px;
            left: 1000px;
            z-index: 0;
        }
        
        .user_callback #user_pic ul .user_pic1 a {
            width: 216.5px;
            height: 248px;
        }
        
        .user_callback #user_pic ul .user_pic2 a {
            width: 225.5px;
            height: 259px;
        }
        
        .user_callback #user_pic ul .user_pic3 a {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul .user_pic4 a {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul .user_pic5 a {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul .user_pic6 a {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul .user_pic7 a {
            width: 225.5px;
            height: 259px;
        }
        
        .user_callback #user_pic ul .user_pic8 a {
            width: 216.5px;
            height: 248px;
        }
        
        .user_callback #user_pic ul li:hover {
            background: #d9bb83;
        }
        
        .user_callback #user_pic ul li.user_pic1 {
            opacity: 0.2;
            filter: alpha(opacity: 20);
        }
        
        .user_callback #user_pic ul li.user_pic2 {
            opacity: 0.6;
            filter: alpha(opacity: 60);
        }
        
        .user_callback #user_pic ul li.user_pic3 {
            opacity: 0.8;
            filter: alpha(opacity: 80);
        }
        
        .user_callback #user_pic ul li.user_pic4 {
            opacity: 1;
            filter: alpha(opacity: 100);
        }
        
        .user_callback #user_pic ul li.user_pic5 {
            opacity: 1;
            filter: alpha(opacity: 100);
        }
        
        .user_callback #user_pic ul li.user_pic6 {
            opacity: 0.8;
            filter: alpha(opacity: 80);
        }
        
        .user_callback #user_pic ul li.user_pic7 {
            opacity: 0.6;
            filter: alpha(opacity: 60);
        }
        
        .user_callback #user_pic ul li.user_pic8 {
            opacity: 0.2;
            filter: alpha(opacity: 20);
        }
        
        .user_callback #user_pic ul li.user_pic1 img {
            width: 216.5px;
            height: 248px;
        }
        
        .user_callback #user_pic ul li.user_pic2 img {
            width: 225.5px;
            height: 259px;
        }
        
        .user_callback #user_pic ul li.user_pic3 img {
            width: 230.5px;
            height: 264px;
        }
        
        .user_callback #user_pic ul li.user_pic4 img {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul li.user_pic5 img {
            width: 247.5px;
            height: 285px;
        }
        
        .user_callback #user_pic ul li.user_pic6 img {
            width: 230.5px;
            height: 264px;
        }
        
        .user_callback #user_pic ul li.user_pic7 img {
            width: 225.5px;
            height: 259px;
        }
        
        .user_callback #user_pic ul li.user_pic8 img {
            width: 216.5px;
            height: 248px;
        }
        
        .user_callback #user_pic span {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 160px;
            z-index: 30;
            cursor: pointer;
            opacity: 0.7;
            filter: alpha(opacity=70);
        }
        
        .user_callback #user_pic:hover span {
            opacity: 1;
            filter: alpha(opacity=100);
        }
        
        .user_callback #user_pic span img {
            width: 80px;
            height: 80px;
            display: block;
        }
        
        .user_callback #user_pic span.prev {
            background: url(img/5836af12Neb8a5654.png) no-repeat;
            position: absolute;
            top: 100px;
            left: 5px;
            display: inline-block;
            width: 60px;
            height: 60px;
        }
        
        .user_callback #user_pic span.next {
            background: url(img/5836af12N536e472b.jpg) no-repeat;
            position: absolute;
            top: 100px;
            right: 5px;
            display: inline-block;
            width: 60px;
            height: 60px;
        }
        
        .user_callback #user_pic span.prev:hover {
            background: url(img/5836af12Neb8a56523.png) no-repeat;
        }
        
        .user_callback #user_pic span.next:hover {
            background: url(img/5836b011N9a4d4531.jpg) no-repeat;
        }
        
        .user_callback {
            /* background: #ccab6e; */
            overflow: hidden;
        }
    </style>

    <div class="user_callback">
        <div class="user_pic" id="user_pic">
            <span class="prev"></span> <span class="next"></span>
            <ul id="user_call">
                <li class="user_pic1">
                    <a href="#"> <img src="img/57f8c4ccN6a433b82.png" alt="1" width="248" height="285" /></a>
                </li>
                <li class="user_pic2">
                    <a href="#"> <img src="img/57f8c4d6Nd425f6a3.png" alt="2" width="247" height="285" /></a>
                </li>
                <li class="user_pic3">
                    <a href="#"> <img src="img/57f8c4e1Nbd6f109e.png" alt="3" width="248" height="285" /></a>
                </li>
                <li class="user_pic4">
                    <a href="#"> <img src="img/57f8c4ecN92c22efc.png" alt="4" width="247" height="285" /></a>
                </li>
                <li class="user_pic5">
                    <a href="#"> <img src="img/583691e7Na26009a0.png" alt="5" width="247" height="285" /></a>
                </li>
                <li class="user_pic6">
                    <a href="#"> <img src="img/583691e7Ne2adc3c4.png" alt="6" width="247" height="285" /></a>
                </li>
                <li class="user_pic7">
                    <a href="#"> <img src="img/583691e7N058f6f5a.png" alt="7" width="247" height="285" /></a>
                </li>
                <li class="user_pic8">
                    <a href="#"> <img src="img/583691e7N36b67a44.png" alt="8" width="247" height="285" /></a>
                </li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        function arcSlip() {
            var oPic = document.getElementById('user_pic');
            var oPrev = getByClass(oPic, 'prev')[0];
            var oNext = getByClass(oPic, 'next')[0];

            var aLi = oPic.getElementsByTagName('li');

            var arr = [];

            for (var i = 0; i < aLi.length; i++) {
                var oImg = aLi[i].getElementsByTagName('img')[0];

                arr.push([parseInt(getStyle(aLi[i], 'left')), parseInt(getStyle(aLi[i], 'top')),
                    getStyle(aLi[i], 'zIndex'), oImg.width, parseFloat(getStyle(aLi[i], 'opacity') * 100)
                ]);
            }


            oPrev.onclick = function moveTP() {
                arr.push(arr[0]);
                arr.shift();
                for (var i = 0; i < aLi.length; i++) {
                    var oImg = aLi[i].getElementsByTagName('img')[0];

                    aLi[i].style.zIndex = arr[i][2];
                    startMove(aLi[i], {
                        left: arr[i][0],
                        top: arr[i][1],
                        opacity: arr[i][4]
                    });
                    startMove(oImg, {
                        width: arr[i][3]
                    });
                }

            }

            oNext.onclick = function moveTN() {
                arr.unshift(arr[arr.length - 1]);
                arr.pop();
                for (var i = 0; i < aLi.length; i++) {
                    var oImg = aLi[i].getElementsByTagName('img')[0];

                    aLi[i].style.zIndex = arr[i][2];
                    startMove(aLi[i], {
                        left: arr[i][0],
                        top: arr[i][1],
                        opacity: arr[i][4]
                    });
                    startMove(oImg, {
                        width: arr[i][3]
                    });
                }
            }
            var moveTime = setInterval(function() {

                oNext.click();

            }, 2000);
            $('#user_pic').hover(function() {;;
                clearInterval(moveTime);
            }, function() {
                moveTime = setInterval(function() {
                    oNext.click();
                }, 2000);
            });

            function getStyle(obj, name) {
                if (obj.currentStyle) {
                    return obj.currentStyle[name];
                } else {
                    return getComputedStyle(obj, false)[name];
                }
            }
        }

        function getByClass(oParent, sClass) {
            var aResult = [];
            var aEle = oParent.getElementsByTagName('*');

            for (var i = 0; i < aEle.length; i++) {
                if (aEle[i].className == sClass) {
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

        function getStyle(obj, name) {
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        function startMove(obj, json, fnEnd) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var bStop = true;
                for (var attr in json) {
                    var cur = 0;

                    if (attr == 'opacity') {
                        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        cur = parseInt(getStyle(obj, attr));
                    }

                    var speed = (json[attr] - cur) / 6;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (cur != json[attr]) bStop = false;

                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                        obj.style.opacity = (cur + speed) / 100;
                    } else {
                        obj.style[attr] = cur + speed + 'px';
                    }
                }

                if (bStop) {
                    clearInterval(obj.timer);
                    if (fnEnd) fnEnd();
                }

            }, 30)


        }
        arcSlip();
    </script>
</body>

</html>
带风的少年
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
弧形动画菜单
yushuangping的博客
10-17 492
最近公司项目需求，需要做一个弧形动画菜单的效果，在网上找了很久终于找到了自己想要的效果，现在记录下来以方便自己和大家学习，效果图如下：              首先需要添加依赖：              compile 'csy.menu.satellitemenulib:SatelliteMenu:1.0.3'             在布局中的使用如下：
Javascript+CSS实现的弧形导航二级菜单
01-26
Javascript+CSS实现的弧形导航二级菜单，外观漂亮实用。
vue2 弧形半圆菜单
MENGeuylu的博客
05-08 785
实现弧形左右点击轮播效果，需一个圆的容器形容器内有6个小圆点，一半隐藏一半显示，默认一个对象有两种状态，img为未选中imgs为选中状态进行效果展示。
jQuery圆弧形图片播放插件 可自动播放
weixin_46133151的博客
01-09 470
这是一个基于jQuery圆弧形图片播放插件。之前我们介绍的jQuery轮播图要么是左右切换，要么是上下切换，然后带有不同的过渡动画特效。但这款jQuery图片切换插件是沿着圆弧进行轮播切换的，更具有立体感，而且它也支持自动循环播放。实现这个效果的代码如下： html： <div class="user_callback"> <div class="user_pic" id...
弧形菜单效果制作（vue3） 2021-12-24
y1377593732的博客
12-24 2487
目的 绘制弧线，菜单沿弧线分布，根据公式计算位置 公式：二次贝塞尔曲线 效果图 源码 弧线组件 <template> <div class="svg"> <svg :width="s.width.value" :height="s.height.value"> <defs> <linearGradient id="color"> <stop offset="
使用三次贝塞尔曲线绘制弧形菜单
yinzisang的博客
07-20 1372
vue2使用三次贝塞尔曲线绘制弧形菜单
自定义控件：实现半圆滚动菜单效果
08-27 366
转自：http://blog.csdn.net/a553181867/article/details/52068897 前言 本自定义控件参考自鸿洋大神的自定义控件(原文地址)，基于原来的控件效果进行修改，着重实现了以下效果：位置自动修正以及滑动结束的回调。我们先来看看效果图： 上面的图片是一个ImageView，与控件无关，是为了验证回调功能。接着是位置自动修正：
js+css3曲线循环菜单滚动切换特效
06-05
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...
ArcMenu:创建弧形菜单
06-14
弧形菜单创建形弧菜单======== #DEMO＃用法缓动效果由菜单项的css过渡产生，可随意暂只支持高级浏览器 < script type = "text/javascript" src = "arcMenu.js" > < / script >...
jQuery+CSS3动画弧形弹出菜单
04-06
接下来，我们将深入探讨这个主题，包括jQuery和CSS3的核心概念、动画效果的实现以及弧形菜单的构建。 首先，**jQuery**是一种广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画和Ajax交互。...
弧形变化的Flash动感菜单.rar
07-10
【弧形变化的Flash动感菜单】是一个以Flash技术实现的交互式网页元素，主要用于网站的一级导航菜单。这种菜单在用户将鼠标悬停在各个菜单项上时，能展现出独特的动态效果，即背景以弧线形式产生有弹性的变化，为用户...
JavaScript可展开隐藏的侧边栏圆形菜单DEMO演示
05-02
JavaScript可展开隐藏的侧边栏圆形菜单DEMO演示
html5圆形旋转菜单js,旋转菜单导航（原创）
weixin_36381298的博客
06-16 1305
插件描述：基于原生js实现的圆形菜单导航旋转切换，支持手动修改焦点图位置，可自定义焦点图动画，支持动态添加、删除元素等更新时间：2019-08-1923:34:50更新说明：添加使用说明git地址:https://github.com/54zch/rotatingMenurotatingMenu基于原生js实现的圆形菜单导航旋转切换，支持手动修改焦点图，可自定义焦点图动画，支持动态添加、删除元素...
半圆形菜单demo
十年树木的博客
10-20 2057
工作中碰到一个写的很好的圆形菜单，demo过来，后面看看，感觉很有用。 底部圆形展开菜单demo
超酷JS圆形浮动菜单
nycqwert的专栏
11-14 2627
www.lanrentuku.com  body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}  .obj {position:absolute;font-size:1
jQuery圆形轮播自动切换图文
qq_42400124的博客
01-11 1110
jQuery圆形轮播自动切换图文
JS实现的花样轮播效果
MZTing的博客
03-08 520
第一种：简单的带按钮的轮播 介绍：左右按钮控制轮播，点击左按钮切换上一张图片，点击右按钮切换下一张 html如下：` <div class="box"> <div class="imgbox"> <a><img src="img/banner1.jpg" alt=""></a> ...
圆形导航栏
臧小川的博客
12-07 387
import { useState } from 'react'; import styles from './style.less' const menus = [ { name: '文旅', id: 1, children: [ { name: '住房服务', id: 1 }, { name: '公共事业', id: 2 }, { name: '社保服务', id: 3 }, ] },
canvas 弧形菜单
最新发布
06-12
Canvas 是 HTML5 中的一个标签，用于在网页上绘制图形，包括复杂的形状如弧形。弧形菜单（Circular Menu）是一种常见的UI设计，它通常用于导航，展示成环形或半圆形的布局，其中每个选项作为一个弧形部分。 创建 Canvas 上的弧形菜单主要涉及以下几个步骤： 1. **HTML 结构**：设置一个 `canvas` 元素作为容器，并可能包含一些按钮或者其他交互元素。 ```html <canvas id="arcMenu" width="400" height="400"></canvas> ``` 2. **JavaScript 代码**：使用 JavaScript 和 Canvas API 来绘制弧形和添加交互逻辑。 ```javascript const canvas = document.getElementById('arcMenu'); const ctx = canvas.getContext('2d'); // 设置路径数据 const center = { x: canvas.width / 2, y: canvas.height / 2 }; const radius = canvas.width / 2; const sectors = [ { startAngle: 0, endAngle: Math.PI * 0.75, text: 'Option 1' }, { startAngle: Math.PI * 0.75, endAngle: Math.PI, text: 'Option 2' }, // 更多选项... ]; // 绘制弧形 sectors.forEach(sect => { ctx.beginPath(); ctx.arc(center.x, center.y, radius, sect.startAngle, sect.endAngle); ctx.fillStyle = '#008080'; // 颜色选择 ctx.fill(); ctx.save(); ctx.translate(center.x, center.y); // 移动到中心 ctx.rotate(sect.startAngle); // 旋转到起始角度 ctx.fillText(sect.text, -ctx.measureText(sect.text).width / 2, 15); // 文本位置 ctx.restore(); }); ``` 3. **交互处理**：可以通过鼠标事件监听器来响应用户点击，切换或获取当前选中的弧形区域。 ```javascript canvas.addEventListener('click', e => { const rect = canvas.getBoundingClientRect(); const angle = Math.atan2(e.clientY - rect.top, e.clientX - rect.left) - Math.PI / 2; const closestSector = sectors.find(sect => { return sector.startAngle <= angle && angle < sector.endAngle; }); // 处理点击事件 console.log('Clicked on:', closestSector.text); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

带风的少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值