几行代码做出引导页效果

最新推荐文章于 2023-04-06 16:47:55 发布
最新推荐文章于 2023-04-06 16:47:55 发布
阅读量232 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： javascript html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bs3412/article/details/120696507
版权

完整代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>引导页演示</title>
    <script src="js/jquery.min.js"></script><!--引用jq-->
    <style>
    #ydy{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: url(img/ydy.png) 0% 0% /100% 100% no-repeat;  /*引用引导页图片*/
    }
    </style>
</head>
<body>
    <div id="ydy" style="display: none;">
        <button type="button" style="float:right;color: #6c757d;border-color: #6c757d;" id="btn1">跳过</button>
    </div>
    <script>
        window.onload =function(){
            $('#ydy').show();
            btn1.onclick=function(){
                $('#ydy').hide();
                window.location.href="index.php";  
            }
            setTimeout(function() {
                $('#ydy').hide();
                window.location.href="index.php";  
            }, 5000);
        }
    </script>
</body>
</html>

按钮样式没写有点丑，各位看官可自行修改。

小凡全栈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
引导页源码
04-04
酷炫的引导页源码 酷炫的引导页源码 酷炫的引导页源码 酷炫的引导页源码 酷炫的引导页源码 酷炫的引导页源码 酷炫的引导页源码
一个带点动态效果的html5引导页代码html+css+js
11-01
一个静态单页面，通过jquery.rotate.js实现图片旋转，animate.css实现动画效果，关于背景图片垂直居中和图片垂直居中，可以参考下
引导页实现代码--iOS
a1293的博客
09-08 95
@interface PJXPushGuideView : UIView +(instancetype)guideView; +(void)show; @end #import "PJXPushGuideView.h" @implementation PJXPushGuideView +(instancetype)guideView{ //加...
前端引导页代码
一天不学习，就浑身难受
03-09 1108
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>电子科大智能信息实验室</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <l
android 引导页代码,引导页 - android代码库 - 云代码
weixin_35713375的博客
05-26 66
[android]代码库import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPa...
jQuery插件pagewalkthrough实现引导页效果
10-23
主要介绍了jQuery插件pagewalkthrough实现引导页效果的方法和示例代码，十分的详细和实用，有需要的小伙伴可以参考下。
Unity实现引导页效果
12-20
本文实例为大家分享了Unity实现引导页效果的具体代码，供大家参考，具体内容如下 效果图: 1、创建Canvas，设置RenderMode=ScreenSpace-Overlay，UIScaleMode = ScaleWithScreenSize， ReferenceResolution（x=1080...
iOS 引导页的镂空效果实例
01-05
最近项目新功能更改较大，产品童鞋要求加入新功能引导，于是一口气花了两天的时间做了一个引导页，当然加上后面的修修补补的时间，就不只两天了，不过这事情其实是一劳永逸的事情，值得做。同时为了能够更好的复用，...
微信小程序的引导页实现代码
01-19
一、引导页 下给大家康康效果图是啥样舍的呢！！ 其实就是和轮播图差不多，就是当用户滑动到最后一页的时候显示跳转页面就完事了。 二、代码分析 第一步：先找到小程序目录下面的app.json然后在“pages”配置好页面...
Android 引导页的代码
weixin_30322405的博客
02-11 127
布局代码 <android.support.v4.view.ViewPager android:id="@+id/viewpage" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--android:background="@drawable/...
jq实现首次引导页面
05-30
jquery制作最近网站比较流行的网站页面功能引导用户，提示用户网站的主要功能和操作。当用户首次进入网站时会提示网站功能引导，提示用户操作。写入cookie浏览器缓存，下次不重复提示网站页面功能引导。
引导页源码一优易.zip
05-10
个人感觉超好看 字体有点小 可以自行更换背景 logo 出站链接
Android 欢迎页面引导页源码
11-06
一般刚打开一个APP的时候，都会出现一个欢迎页，比如下面这个界面，但是这个界面一般是不需要显示太长时间的，而且这个界面之后一般还会有一个带有广告的界面，那个界面可以根据需要停留一段时间。同时，当第一次安装一个APP的时候，一般会出现一个可以滑动的引导界面，用于提示用户该版APP的主要功能。当然，做的好更能吸引用户的眼球，增加点击量。
JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能
08-27
JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能
引导页
MisayaLee的博客
08-22 560
 前面通过共享参数已经能够顺利的从广告页跳转到引导页，现在到了引导页，如何对引导页进行布局呢？引导页一般有三张，利用到了一个传统成熟的控件Viewpager,它在v4包里面，v4包可以保证低版本的手机也可以使用这个控价，兼容性更强。         首先来看下布局layout   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;Relativ...
残月引导页代码分享
残月博客
04-06 96
残月拟态引导页代码
DHGuidePageHUD的使用，一行代码搞定引导页
wangjie33589的博客
07-26 745
最近用DHGuidePageHUD来开发引导页轻松一段代码搞定。特此记录一下。 NSArray *imageNameArray = @[@"guide1",@"guide2"];     DHGuidePageHUD *guidePage = [[DHGuidePageHUD alloc] dh_initWithFrame:self.view.frame imageNameArray:imag...
0代码实现项目引导页
klkxxy的博客
10-12 760
项目介绍： KSGuidView 第一次运行项目的引导页 0行代码展示引导页面 把KSGuidViewController拖入工程即可 详情见Demo 点击这里进行DEMO下载
安卓引导页面代码
最新发布
06-01
以下是一个简单的安卓引导页面代码： 布局文件： ```xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary"> <ImageView android:id="@+id/imageView" android:layout_width="200dp" android:layout_height="200dp" android:layout_centerInParent="true" android:src="@drawable/logo" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageView" android:layout_centerHorizontal="true" android:textColor="@android:color/white" android:textSize="18sp" android:text="Welcome to my app" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:layout_marginTop="20dp" android:text="Get Started" /> </RelativeLayout> ``` Activity代码： ```java public class IntroActivity extends AppCompatActivity { private Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_intro); button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //在这里处理按钮点击事件 } }); } } ``` 这个布局文件包含一个ImageView显示应用程序的logo，一个TextView显示欢迎消息，一个Button开始按钮。在Activity中，我们可以使用findViewById()方法获取这些视图并设置点击事件处理程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小凡全栈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值