• jquery 的3D Carousel插件参数说明


    这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下。有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理。

    1:首先需要创建一个ul对象,然后里面每一个li对象中的内容就是一个旋转的图形,第一个需要注意的就是img对象必须放在最前面,然后后面才跟其他内容。

    <li>
      <img src="images/content1.png" alt=""/>
      <div class="tooltip">提示信息</div>
      <data class="url">Real.aspx</data>
      <data class="linkTarget">_self</data>
    </li>

      如上所写,img是选择的图片,tooltip是鼠标移动到图片上的提示信息,后面两个data节点的内容是我需要自定义的内容,请注意这里面必须定义class,然后在后面要使用该值时就使用class名称的属性名。

    2:创建一个carousel对象

    $("#carousel").carousel({
                         400,       //对象宽度 
                        height: 200,      //对象高度
                        itemWidth: 20,
                        posterWidth: 340, //当前显示的图片的宽度
                        posterHeight: 200, //当前显示的图片的高度
                        horizontalRadius: 370, //图片左右滚动的半径
                        verticalRadius: 100,   //图片上下滚动的半径
                        resize: false,
                        mouseScroll: false,
                        mouseDrag: true,
                        scaleRatio: 0.4,
                        scrollbar: false,
                        autoScroll: true,
                        tooltip: true,
                        itemClick: onItemClick,  //自定义每个图片的点击事件
                        mouseWheel: true,
                        mouseWheelReverse: true
                    });
                    

    3:选择图片点击事件说明

    function onItemClick(evt) {
                        window.location.href = evt.data.url;
                    }

      在此特别说明:点击事件输入的evt对象,evt.data就是可以自定义的数据, 该控件默认有属性名:path,link,linkTarget,tooltip。属性名就是class名称,在火狐或chrome中定义了link和linkTarget属性,会自动弹出链接窗口。但是在IE8中没有。因此,我自定义了一个url的地址。在Click事件中进行自行处理。

  • 相关阅读:
    Python 时间类型及其互相转换
    SQLAlchemy技术手册
    Flask与微信小程序登录(后端)
    使用Docker搭建MySQL服务
    开发中常见的正则表达式
    关于CSRF 和 csrftoken
    Flask-migrate基本使用方法
    MySql查询进阶
    常见Http访问错误小结
    git简易操作手册
  • 原文地址:https://www.cnblogs.com/coolsundy/p/5888327.html
Copyright © 2020-2023  润新知