zoukankan      html  css  js  c++  java
  • ajax-简单参数方法实现阴影效果

    注:

    简单参数
    (按照参数的数量和位置传递参数)
    使用时按照位置、数量传递

    shadow.js函数

    //简单参数实现方式
    /*
    * slices:阴影
    * opacity:透明度
    * zIndex:层级
    * */
    jQuery.fn.shadow_simple = function (slices,opacity,zIndex) {
    //获取到每个已封装的元素
    //this表示jQuery对象
    this.each(function () {
    $obj = $(this);//将遍历出来的元素转换成jQuery对象
    //更改i的值:10 20都可以,能够改变阴影效果
    for (var i = 0; i <slices; i++) {
    var $newObj = $obj.clone();//克隆出来5个新的对象
    //确定元素的位置。使用绝对定位,设置top和left的值偏移量大小决定最终的阴影位置
    $newObj.css({
    position: "absolute",
    top: $obj.offset().top + i,
    left: $obj.offset().left + i,
    zIndex: zIndex,
    margin: 0,
    opacity: opacity
    }).appendTo("body");
    }
    });
    }

    html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/shadow.js"></script>
    <script>
    $(document).ready(function(){
    // $("h1").shadow();//调用对象方法的效果
    $("h1").shadow_simple(7,0.3,-1);//调用简单参数实现效果,用户自己传递参数
    });
    </script>
    </head>
    <body>
    <h1>Hello My Name Is Anny</h1>
    </body>
    </html>
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    BLOB
    cesium 检测视图改变的代码
    有关Nodejs的一些插件介绍
    线程基础知识
    进程和线程概念对比
    C#对象与XMl文件之间的相互转换(转)
    简介C#读取XML的方式(转)
    关于c# Debug和Release的区别 (转)
    c++堆和栈(转)
    浅谈C#堆栈与托管堆的工作方式(转)
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/9266584.html
Copyright © 2011-2022 走看看