活动页开发小记

标签：for   Fix   board   使用   oar   底部   登录   clipboard   ali   

1、 a链接跳转的时候打开新的页面

< a href="index.html"  target="_blank" >跳转打开一个新的页面（不刷新本页）</a>

2、 弹框通常需要一个透明度rgba(0,0,0,0.2) 黑色添加0.2的透明度 呈现遮罩层的效果

3、 background-color: transparent;

background-color: rgba(255, 255, 255, 0.1); 白色添加0.1的透明度，只会让背景变透明。

直接对元素使用opacity，不仅背景变透明，字体也会变透明

4、 banner div设置背景图img或者背景视频video设置宽高width: 100%;  height: auto;

跟整个banner底部有一点间距，这时候只要加上vertical-align: middle;即可

5、 绝对定位元素水平居中

left: 50%;

transform: translateX(-50%);

6、 三个tab键切换，点击tab跳到对应位置 使用jquery实现

　　这里要用到点击事件，因为点击处可能数量较多，因此最好用事件代理来处理，可以提高性能。

　　当点击一个按钮时，能够获取到与他相对应的元素的ID。（使用HTML5的data-*属性，使用jquery data()方法获取该值）

　　通过jquery的offset方法返回top和left两个属性后获取他的top属性。

　　用animate方法改变html的scrollTop属性，值为上面的top属性值。

　　有的时候定位不准，点击按钮跳的位置有偏差可能是因为scrollTop的值不对，页面顶部有固定定位position: fixed的元素，需要减去该元素的高度，此外，可能还跟跳转后的元素的margin有关，需要根据具体定位具体分析。

参考链接：

如何用jquery实现点击后跳到页面指定位置

https://www.cnblogs.com/yxyblogs/p/5050522.html

jQuery获取data-*属性值

https://cloud.tencent.com/developer/article/1762017?from=information.detail.js%E8%8E%B7%E5%8F%96li%E7%9A%84data%E5%B1%9E%E6%80%A7

HTML5 自定义属性 data-* 和 jQuery.data 详解

https://cloud.tencent.com/developer/article/1065443?from=information.detail.js%E8%8E%B7%E5%8F%96li%E7%9A%84data%E5%B1%9E%E6%80%A7

.jquery target()     event.target

target 属性规定哪个 DOM 元素触发了该事件。

https://blog.csdn.net/qq_35029061/article/details/83238964

7、 jQuery hover() 方法

当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：

$("p").hover(

      function () {

        $("p").css("color", "yellow");

      },

      function () {

        $("p").css("color", "pink");

      }

    );

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

8、 当点击某部分需要弹框时，给弹框设置样式可以参照下面写法

.someForm{

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.7);

position: fixed;

z-index: 999;

}

9、 后续尽量采用vue-cli3搭建项目

需要多次调用的方法封装起来放在method里面，直接在需要的时候调用

vue刷新当前页面可以用this.$router.go(0); 在用户登录之后刷新当前页面状态

10、gtag埋点

       newUrl = `字符串?username=${this.username}` 

       粘贴到剪切板 clipboard

活动页开发小记

标签：for   Fix   board   使用   oar   底部   登录   clipboard   ali   

原文地址：https://www.cnblogs.com/ytshang/p/14945402.html