产品360度旋转插件

产品360度旋转插件

博主头像
2022-07-14 / 1 评论 / 643 阅读 / 正在检测是否收录...

Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。

主要的特点有:
支持水平或垂直方向旋转。
支持移动触摸事件。
支持滚动事件。
图片预加载处理。
可以反向和循环旋转图片。

<!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>360度3D旋转</title>
    <style>
        #circlr {
            cursor: move;
            margin: 0 auto;
            min-height: 100px;
            position: relative;
        }

        #circlr #loader {
            background: url(../images/loader.gif) center center no-repeat;
            bottom: 0;
            display: none;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="circlr">
            <div id="loader"></div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/circlr.min.js"></script>
    <script>
        // 图片太多用js动态添加 
        for (var i = 1; i <= 40; i++) {
            var img = $("<img  data-src='images/" + i + ".png'/>");
            $("#circlr").append(img);
        }
    </script>
    <script>
        $(function () {  // 入口函数 ,等上面的图片加载完毕之后才执行
            var crl = circlr('circlr', {
                scroll: true,  // 滚动滚轮也能旋转
                loader: 'loader'
            })
        })
    </script>
</body>

</html>

参数

mouse:是否通过鼠标进行图片旋转,默认值为true。
scroll:是否通过scroll进行图片旋转,默认值为false。
vertical:是否在垂直方向上移动鼠标时旋转图片,默认值为false。
reverse:是否反转方向,默认值为false。
cycle:是否循环旋转图片,默认值为true。
start:开始动画帧,默认值为0。
speed:动画帧通过circlr.turn(i)切换的速度,默认值为50毫秒。
autoplay:是否自动进行图片360度旋转播放,默认值为false。
playSpeed:动画序列的播放速度,默认值为100毫秒。
loader:预加载DOM元素的ID。
ready:图片加载完成后的回调函数。
change:动画帧改编之后的回调函数(以当前帧和总帧数为参数)。

方法
crl.el:返回对象的DOM元素节点。
crl.length:返回对象的总的动画帧数。
crl.turn(i):动画旋转到第i帧。
crl.go(i):动画跳转到第i帧。
crl.play():开始动画序列的播放。
crl.stop():停止动画播放。
crl.hide():隐藏对象的DOM元素节点。
crl.show():显示对象的DOM元素节点。
crl.set(options):在插件初始化之后改变对象的参数:
vertical
reverse
cycle
speed
playSpeed

文件下载


98
打赏

评论 (1)

取消
  1. 头像
    wrwer
    中国浙江省宁波市电信 · Windows 10 Windows 10 / Google Chrome Google Chrome

    下载表情

    回复