设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 9 1 - 滚动触发交互 | 【鱼C英雄帖】
返回列表 发新帖
查看: 2814|回复: 8

[庖丁解牛] 0 0 9 1 - 滚动触发交互 | 【鱼C英雄帖】

[复制链接]
不二如是
发表于 2017-3-21 14:35:44 | 显示全部楼层 |阅读模式
购买主题 已有 5 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

睁眼睡大觉
发表于 2019-3-31 17:25:06 | 显示全部楼层
啊哈哈 请问大佬个问题 这些图片素材在哪找的 特别好看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-15 17:17:47 | 显示全部楼层
养成暖贴回复的好习惯，JS还是有点不清楚
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

笋头蒜头
发表于 2020-3-24 09:20:55 | 显示全部楼层
哈哈哈哈
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

287187056
头像被屏蔽
发表于 2020-4-2 16:57:03 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

小脑斧
发表于 2020-4-18 15:39:52 | 显示全部楼层
本帖最后由 小脑斧 于 2020-4-18 15:44 编辑

u=3677495585,4127462015&fm=26&gp=0.jpg u=14335000,2737653851&fm=26&gp=0.jpg


test.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.          body{
  8.             background: url("big.jpeg") no-repeat 50% 0;           
  9.             font-family: "仿宋";
  10.             color: #e02562;
  11.         }
  12.         #main{
  13.             opacity: 0;/*opacity初始值设为0，即完全透明。而是从完全透明，渐变出来。结合transtion,更详细结合js*/
  14.             transition: all 2.2s .5s;
  15.             padding-top: 450px;
  16.             text-align: center;
  17.         }
  18.         #main.show{
  19.             opacity: 1;
  20.         }
  21.         #main,#slogan,#run{
  22.             position: relative;
  23.             height: 1400px;
  24.         }
  25.         #main{

  27.        }
  28.         #main h1{
  29.             font-size: 150px;
  30.             font-family: "Caslon" ;
  31.         }

  33.         #slogan{
  34.             padding-top: 335px;
  35.             text-align: center;
  36.         }
  37.         #slogan h1{
  38.             display: inline-block;
  39.             padding-top: 12px;
  40.             padding-bottom: 12px;
  41.             font-size: 55px;
  42.             border-top: 3px solid #000000;
  43.             border-bottom: 3px dotted #000000;
  44.         }
  45.         #slogan h2{
  46.             font-size: 55px;
  47.         }

  49.         #run h1{
  50.             position: absolute;
  51.             font-size: 77px;
  52.             right: 41%;
  53.             top: 1%;
  54.         }
  55.         #run h2{
  56.             position: absolute;
  57.             font-size: 33px;
  58.             right: 44%;
  59.             top: 10%;
  60.             font-family: "楷体";
  61.         }
  62.         #run img{
  63.             position: absolute;
  64.             right: 45%;
  65.             top: 18%;
  66.         }
  67.     </style>
  68.     <script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
  69.     <script type="text/javascript">
  70.         $(document).ready(function()
  71.         {
  72.             $('#main').addClass('show');
  73.         });
  74.     </script>
  75. </head>
  76. <body>
  77.     <div id="main">
  78.         <h1>鱼C英雄帖</h1>
  79.         <h2>欢迎加入鱼C党卫军</h2>
  80.     </div>

  82.     <div id="slogan">
  83.         <h1>隐藏在黑暗中的正义</h1>
  84.         <h2>守护鱼C和平</h2>
  85.     </div>

  87.     <div id="run">
  88.         <h1>I need U</h1>
  89.         <h2>让编程改变世界</h2>
  90.         <img src="3.jpg">
  91.     </div>
  92. </body>
  93. </html>
复制代码




想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

tianyuan
发表于 2020-6-13 08:44:20 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

GLBGLB
发表于 2020-12-23 16:06:28 | 显示全部楼层
hello
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

jack6666
发表于 2022-9-22 21:06:25 | 显示全部楼层
1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 21:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表