活动页开发小记

Posted ytshang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了活动页开发小记相关的知识,希望对你有一定的参考价值。

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

以上是关于活动页开发小记的主要内容,如果未能解决你的问题,请参考以下文章

VSCode插件开发全攻略代码片段设置自定义欢迎页

微信小程序代码片段

H5活动页开发有关

如何从片段返回主要活动

Android开发——UI_片段

开发具有多个活动或一个活动和多个片段的应用程序?