61,114
社区成员
发帖
与我相关
我的任务
分享【求解】鼠标滚动，固定背景图片渐隐效果
鼠标滚动，背景图片透明度逐渐增加，怎么写的？
网站地址：https://www.apple.com.cn/homepod
网站地址：https://www.apple.com.cn/homepod
...全文
请发表友善的回复…
发表回复
没错，我就是 2020-02-14
- 打赏
- 举报
能不能麻烦您写一下呢？
没错，我就是 2020-02-13
- 打赏
- 举报
这个不是我想要的。附带的链接中，多张图片的渐显叠加是根据文字的出现做的效果吧？
下面是链接中的HTML码
<div class="sticky-wrapper">
<div class="speaker-components-wrapper full-feature" style="top: 226px; transform: translate3d(0px, 0px, 0px);">
<figure class="homepod-speaker-side" style="opacity: 0.999;"></figure>
<figure class="homepod-speaker-guts"></figure>
<figure class="speaker-component homepod-speaker-component-1" style="opacity: 0.001;"></figure>
<figure class="speaker-component homepod-speaker-component-2" style="opacity: 0.001;"></figure>
<figure class="speaker-component homepod-speaker-component-3" style="opacity: 0.001;"></figure>
<figure class="speaker-component homepod-speaker-component-4" style="opacity: 0.001;"></figure>
<figure class="speaker-component homepod-speaker-component-5" style="opacity: 0.001;"></figure>
</div>
<div class="card-wrapper">
<figure class="fallback speaker-component homepod-speaker-component-1"></figure>
<div class="design-card" data-fade-offset=" -0.15">
<h3 class="typography-callout centeralign">重低音的宽广范围，<br>感受一下。</h3>
<p>Apple 设计的高振幅低音单元在整个扬声器的顶部朝上设置，因而能创造出比传统扬声器更为深远雄厚的低音效果。六麦克风阵列与内置的低音均衡器麦克风协作，可分析房间环境对低音的响应情况，并作出相应补偿，从而营造出丰富饱满、始终如一的音质。强大的电机驱动振膜，振幅高达 20 毫米，即使在音量较低时，低音效果同样清晰震撼。</p>
</div>
<figure class="fallback speaker-component homepod-speaker-component-2"></figure>
<div class="design-card" data-fade-offset=" 0">
<h3 class="typography-callout centeralign">离得虽远，<br>却听得真切。</h3>
<p>HomePod 内置六个环形排列的麦克风，用来捕捉房间内的各种声音。有了先进的信号处理技术，再加上回声和噪声消除功能，你只要说声“嘿 Siri”，HomePod 就会听到你的呼唤，即使你正在房间的另一端，家里还大声放着音乐，也无需特地提高音量。当 HomePod 识别出“嘿 Siri”之后，你说的话就会被加密并匿名发送至 Apple 服务器，不会与你的 Apple ID 关联。</p>
</div>
<figure class="fallback speaker-component homepod-speaker-component-3"></figure>
<div class="design-card" data-fade-offset=" 0.2">
<h3 class="typography-callout centeralign">高保真音质，<br>总环绕在你耳边。</h3>
<p>在特制的七波束成形高音单元阵列中，每个单元均配有独立的扩音器，从而带来极佳的方向控制力。这些高音单元置于扬声器的底部，采用折叠号角式设计，可将音乐源源不断地传向中心，再以 360 度的形式从底部扩出，营造出全环绕式的空间感。这几乎完全消除了先前的平面反射声，带来始终如一的高清音质。</p>
</div>
<figure class="fallback speaker-component homepod-speaker-component-4"></figure>
<div class="design-card" data-fade-offset=" 0">
<figure class="image-icon-a8"></figure>
<h3 class="typography-callout centeralign">给扬声器一个更聪明的<span class="nowrap">大脑。</span></h3>
<p>Apple 设计的 A8 芯片将诸多出色的创新音响技术巧妙融合于 HomePod 之中。先进的信号处理技术，让 Siri 在播放音乐时也能听到你的指令。录音棚级别的实时处理技术，在避免失真的同时带来出众的低音效果。还有提前一步的高速缓冲，以及对直达声和环境声的高速上混处理。让你每时每刻，都能尽享动人音色。</p>
</div>
<figure class="fallback speaker-component homepod-speaker-component-5"></figure>
<div class="design-card" data-fade-offset=" 0">
<h3 class="typography-callout centeralign">看起来悦目，<br>听起来悦耳。</h3>
<p>HomePod 采用无缝式网眼织物包覆设计，兼具优雅的美学外观和出众的声学性能。它有白色和深空灰色两款可供选择，从任何角度看都精巧雅致，而声波却能自由穿透，<span class="nowrap">宛若无物。</span></p>
</div>
</div>
</div>
天际的海浪 2020-02-13
- 打赏
- 举报
那也一样，在onscroll事件中用obj.getBoundingClientRect().top获取各文字在窗口内出现的位置来设置对应图片的 opacity 就行了。
天际的海浪 2020-02-12
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<script type="text/javascript">
window.onscroll = function () {
var st = (document.body.scrollTop || document.documentElement.scrollTop);
document.getElementById("img").style.opacity = st / 500;
}
</script>
<img src="https://profile.csdnimg.cn/5/6/7/1_jslang" id="img" style="position: fixed; opacity: 0;">
<p>001</p>
<p>002</p>
<p>003</p>
<p>004</p>
<p>005</p>
<p>006</p>
<p>007</p>
<p>008</p>
<p>009</p>
<p>010</p>
<p>011</p>
<p>012</p>
<p>013</p>
<p>014</p>
<p>015</p>
<p>016</p>
<p>017</p>
<p>018</p>
<p>019</p>
<p>020</p>
<p>021</p>
<p>022</p>
<p>023</p>
<p>024</p>
<p>025</p>
<p>026</p>
<p>027</p>
<p>028</p>
<p>029</p>
<p>030</p>
<p>031</p>
<p>032</p>
<p>033</p>
<p>034</p>
<p>035</p>
<p>036</p>
<p>037</p>
<p>038</p>
<p>039</p>
<p>040</p>
<p>041</p>
<p>042</p>
<p>043</p>
<p>044</p>
<p>045</p>
<p>046</p>
<p>047</p>
<p>048</p>
<p>049</p>
<p>050</p>
</body>
</html> 1．本书附源代码共计381个，其运行环境如下：
IE 5或更高版本
Mozilla Firefox 1.5.0.3或更高版本
服务器采用IIS5.1 或以上版本
数据库使用MS Access 2000以上
2．本书所附光盘实例代码：
第1章（\第1章）
查看1.2.htm中noscript显示效果的方法如下：
1．将该实例复制到C:\Inetpub\wwwroot下；
2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框
3．在浏览器中输入下述地址：http://localhost/1.2.htm
• 1.1.htm 多段代码相互调用
• 1.2.htm <script>与鼠标事件
• 9.15.htm 取消默认动作之一
• 9.16.htm 取消默认动作之二
• 9.17.htm 创建事件
第10章（\第10章）
• 10.1.htm 鼠标事件处理
• 10.2.htm 页面预览
• 10.3.htm 图像切换
• 10.4.htm 接收键盘输入
• 10.5.htm 用鼠标点亮文本
• 10.6.htm 图片跟随鼠标
• 10.7.htm 文字跟随鼠标
• 10.8.htm 星星跟随鼠标
• 10.9.htm 鼠标感应 弹出警告框
• 10.10.htm 鼠标感应 渐显图片
• 10.11.htm 禁用鼠标右键
第11章（\第11章）
• 11.1.htm 省略window的alert()方法
• 11.2.htm 未省略window的alert()方法
• 11.3.htm 未省略window的document.write()方法
• 11.4.htm Document对象部分属性与方法的使用
• 11.5.htm HTML文档属性属性
• 11.6.htm 同时使用name和id
• 11.7.htm 事件控制器的例子
• 11.8.htm JavaScript实现事件控制器
• 11.9.htm 元素属性综合应用
• 11.10.htm 动态修改表单元素内容
第12章（\第12章）
• 12.1.htm Document树的简单例子
• 12.2.htm getElementById()方法
• 12.3.htm DOM结点属性
• 12.4.htm 文档树检测
• 12.5.htm 结点插入与追加
• 12.6.htm 结点复制
• 12.7.htm 结点删除与替换
• 12.8.htm 处理文本结点的方法
• 12.9.htm 处理属性的方法
• 12.10.htm HTMLElement对象
• 12.11.htm DOM遍历API
• 12.12.htm DOM Range API
• 12.13.htm 读取HTML元素内容
• 12.14.htm 修改HTML元素内容
• 12.15.htm innerText、outerText、outerHTML属性
• 12.16.htm document.all[]
第13章（\第13章）
• 13.1.htm HTML对象模型
• 13.2.htm DHTML对象模型
• 13.3.htm DHTML对象模型方法显示和修改网页文字内容
• 13.4.htm DHTML对象模型方法新增和删除表格行内容
• 13.5.htm W3C对象模型方法显示和修改网页内容
• 13.6.htm W3C对象模型方法显示和修改表格内容
• 13.7.htm “相对位置”定位
• 13.8.htm “绝对位置”定位
• 13.9.htm z-index属性
• 13.10.htm z-index属性之二
• layerlib.js 跨浏览器DHTML库
• 13.12.htm 跨浏览器DHTML库的使用
第14章（\第14章）
• 14.1.htm confirm()方法用作判断条件
• 14.2.htm alert()方法与confirm()方法的使用
• 14.3.htm prompt()方法的使用
• 14.4.htm window.open()方法
• 14.5.htm 用链接和按钮实现窗口打开
• 14.6.htm 窗口的打开和关闭
• 14.7.htm 安全关闭窗口
• 14.8.htm 窗口特征属性综合举例
• 14.9.htm 一个窗口写入的简单例子
• 14.10.htm 动态写入HTML代码
• 14.11.htm 窗口写入的应用示例
• 14.12.htm DOM窗口交互
• 14.13.htm 窗口方法测试
• 14.14.htm 用按钮载入页面
• 14.14.htm status属性
• 14.16.htm defaultStatus属性
• 14.17.htm 滚动的状态栏
• 14.18.htm 超时设定
• 14.19.htm onload事件
• 14.20.htm 模式窗口
• 14.21.htm 无模式窗口
• 14.22.htm 窗口应用举例
• 14.23.htm 全屏窗口
第15章（\第15章）
代码说明：本章部分代码使用了第10章、第19章几个文件，如果不能正常显示，则可能这些文件位置已改变。
• 15.1.htm 简单框架
• frames.htm 网页框架
• moreframes.htm 更多框架
• moreframes.htm 框架关联显示
• 15.5.htm 简单的框架网页
• 15.6.htm 内联框架
• 15.7.htm 简单的框架嵌套
• 15.8.htm 框架嵌套
• 15.9.htm 交叉框架通信
• input.htm 交叉框架通信的输入部分
• output.htm 交叉框架通信的输出部分
• 15.12.htm 嵌套框架交叉通信
• top.htm 嵌套框架交叉通信的上部框架
• bottom.htm 嵌套框架交叉通信的底部框架
• minput.htm 嵌套框架交叉通信的输入部分
• moutput.htm 嵌套框架交叉通信的输出部分
• stateframes.htm 状态框架集
• stateframe.htm 状态框架
• mainframe.htm 主框架
• mainframe2.htm 主框架之二
第16章（\第16章）
• 16.1.htm 文档颜色属性应用
• 16.2.htm lastModified
• 16.3.htm lastModified的返回值
• 16.4.htm document.location
• 16.6.htm document.location的详细属性
• 16.6.htm 验证document.referrer
• 16.7.htm 验证document.referrer
• 16.8.htm document.write()与document.writeln()
• 16.9.htm 字符串连接输出
• 16.10.htm document.close()和document.open()
• 16.11.htm document.links[].href
• 16.12.htm elements[]
• 16.13.htm images[]
• 16.14.htm document.getElementById()
• 16.15.htm document.createElement()
• 16.16.htm 设置表格属性
• 16.17.htm 显示表格属性
• 16.18.htm 操作表格元素
• 16.19.htm 插入和删除表元
• 16.20.htm 改变
的内容
• 16.21.htm 改变页面样式
• blue.css 16.21.htm用到的样式文件
• red.css 16.21.htm用到的样式文件
• green.css 16.21.htm用到的样式文件
第17章（\第17章）
• 17.1.htm Form对象测试
• 17.2.htm 基本按钮
• 17.3.htm button按钮
• 17.4.htm 文本域
• 17.5.htm 文本区
• 17.6.htm 限制输入长度的文本区
• 17.7.htm 限制输入长度的文本区之二
• 17.8.htm 复选框与单选按钮
• 17.9.htm 验证输入内容是否为空
• 17.10.htm 验证输入内容是否为空
• 17.11.htm 混合表单验证
• 17.12.htm 按键屏蔽
• 17.13.htm 屏蔽表单域
• 17.14.htm 动态表单
第18章（\第18章）
• 18.1.htm 复选框
• 18.2.htm 单选按钮
• 18.3.htm 复选框与单选按钮的组合使用
• 18.4.htm 使用elements[]数组
• 18.5.htm 选择控件
• 18.6.htm 多项选择控件
• 18.7.htm 级联选择控件
第19章（\第19章）
• 19.1.htm 友情链接
• 19.2.htm 需要确认的友情链接
• 19.3.htm 渐显效果的下拉菜单
• 19.4.htm 模拟系统菜单
• 19.5.htm 图片显示窗口
• 19.6.htm 远程控制菜单
• 19.7.htm 滑动菜单
• 19.8.htm 左键弹出式菜单
• 19.9.htm 浮动菜单
• 19.10.htm 导航式菜单
第20章（\第20章）
• 20.1.htm 显示浏览器名称与版本号
• 20.2.htm 显示浏览器名称（改进章）
• 20.3.htm JavaScript支持检测1
• 20.4.htm JavaScript支持检测2
• 20.5.htm JavaScript对象检测
• 20.6.htm Screen对象
• 20.7.htm 获取浏览器窗口大小
• 20.8.htm 字号随浏览器窗口大小而改变
• 20.9.htm 对代码20.8的改写
• 20.10.htm 在网页中有选择地显示图片
• 20.11.htm 客户端性能检测
• 20.12.htm 浏览器按键模拟
• 20.13.htm 修改Mozilla用户主页
• 20.14.htm 修改IE用户主页
第21章（\第21章）
• 21.1.htm 编码与解码
• 21.2.htm Cookie值被覆盖
• 21.3.htm Cookie分析
• 21.4.htm 用Cookie保存定制样式
• 21.5.htm DHTML行为
第22章（\第22章）
• 22.1.htm 通过单击按钮来改变图像
• 22.2.htm 随机显示不同图像
• 22.3.htm 结构化图形控件
• 22.4.htm 图像定位示例
• 22.5.htm 在IE中拖动图像
• 22.6.htm 按钮翻转示例
• 22.7.htm 跟随屏幕移动的图片
• 22.8.htm 多幅图片滚动显示
• 22.9.htm 图片的左右循环飘动
• 22.10.htm 图片的渐隐渐显
• 22.11.htm 不停闪烁的图片
• 22.12.htm 图片倒映
第23章（\第23章）
• 23.1.htm 简单过渡
• layerlib.js JavaScript外部文件
• 23.3.htm 目标翻转
• 23.4.htm 运动图像
• 23.5.htm 随机图像
• 23.6.htm 动画效果
• 23.7.htm Sequencer控件
• 23.8.htm Path控件
• 23.9.htm 永远居中的背景图片
• 23.10.htm 随机显示的背景图片
• 23.11.htm 垂直滚动公告板
• 23.12.htm 类似Flash的字幕效果
• 23.13.htm 地震效果
第24章（\第24章）
• MyApplet.txt 简单的Java Applet源程序
• 24.2.htm 在JavaScript中访问Java Applet
• 24.3.htm 简单的Flash插件
• 24.4.htm mimeTypes[]数组
• 24.5.htm 使用mimeTypes[]检测支持的媒体类型
• 24.6.htm 使用navigator.plugins[][]列举所有Flash MIME类型
• 24.7.htm 列举plugins[]数组的内容
• 24.8.htm 简单的Flash播放控制器
• 24.9.htm ActiveX控件示例
• 24.10.htm 使代码兼容多种浏览器
• 24.11.htm Flash 播放控制器(ActiveX)
第25章（\第25章）
• 25.1.htm 单向通信中的Image
• 25.2.htm JavaScript向服务器发送RPC
• 25.3.htm 动态内容
• 25.4.htm 中的单词拼写检查
• 25.5.htm 内联框架
第26章（\第26章）
1．查看书中图26.9的效果的方法：
用记事本打开26.5.xml，找到第二行，内容如下：
将两端的去掉并保存该文档后，用IE打开，就可看到图26.9所示的效果。
2．查看书中图26.10的效果的方法：
用记事本打开26.5.xml，找到第3行，内容如下：
将两端的去掉并保存该文档后，用IE打开，就可看到图26.9所示的效果。
3．要查看书中图26.11的效果，须连接Internet。
• 26.1.xml XML文档的例子
• 26.2.xml 包含DTD及其实例的XML文档
• 26.3.xml 要转换的XML文档
• test.xsl 转换XML文档的模板文件
• 26.5.xml 更复杂的要转换的XML文档
• staff.xsl XSL样式表
• staff.css CSS样式表
• 26.8.xml 使用了MathML的XML文档
• 26.9.htm 显示XML文档根结点
• 26.10.htm 使用Jscript与DOM直接操作XML
• 26.11.xml 使用Mozilla直接操作XML
• 26.12.js 使用Mozilla直接操作XML用到的js文件
• 26.13.htm IE XML数据岛应用
• 26.14.htm IE XML数据岛
• 26.15.rss 简单的rss文件
• 26.16.htm 简单的rss阅读器
第28章（\第28章）
• 28.1.htm 显示当前时间
• 28.2.htm 显示当前日期和星期
• 28.3.htm 显示日期、时间和星期
• 28.4.htm 分时段问候
• 28.5.htm 以数字图片来显示时间
• 28.6.htm 显示世界不同地区的当前时间
• 28.7.htm 总是悬浮的时钟
• 28.8.htm 简单的加减乘除运算
• 28.9.htm 能进行四则混合运算的计算器
• 28.10.htm 在表单中显示打字效果
• 28.11.htm 随页面刷新更换页面背景
• 28.12.htm 随页面刷新显示不同图片
第29章（\第29章）
• 29.1.htm 汉诺塔问题求解
• 29.2.htm 位置固定的对联广告
• 29.3.htm 随页面滚动的对联广告
• 29.4.htm 循环滚动的多幅广告
• css.css 代码29.4用到的样式文件
• 29.6.htm 用JavaScript实现级联选择
• ajax_server.asp 使用ASP访问demo数据表
• ajax.htm 使用ajax实现级联选择
第30章（\第30章）
代码说明：本章实现了一个ASP留言板程序，程序需要在IIS环境下运行。
• index.asp 留言板主程序
• guestbook.mdb 留言板数据库程序
• images\ 留言板使用的图像文件目录
