微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

请高手解释一下小米4宣传页面的这个特效怎么做的?_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:58:19
原创
1417人浏览过

http://www.mi.com/mi4#fea-ten
网址在上面，就是黑白两色的切换。还可以手动切换。
谢谢！

小爱开放平台
小爱开放平台

小米旗下小爱开放平台

小爱开放平台 23
查看详情 小爱开放平台

回复讨论(解决方案)

上下2张图片不行？

提取网页上的代码，做了个 演示代码，里面用了四张图片，主要是计算宽度和高度
因为演示代码的窗口比较小，所以把拖动按钮的位置向上一了(样式.mi4-content-feature-h .feature-float-control里面的margin-top)

提取网页上的代码，做了个 演示代码，里面用了四张图片，主要是计算宽度和高度
因为演示代码的窗口比较小，所以把拖动按钮的位置向上一了(样式.mi4-content-feature-h .feature-float-control里面的margin-top)



效果很好，赞一个

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-37.png

确实是两个图。 2楼组装能力真强



示例是从官网上摘下来的，两个图是黑白手机正面的，四个图是黑白手机正反两面的

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-37.png
确实是两个图。 2楼组装能力真强

相关标签：
小米

大家都在看：

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU，手机跑分情况，电脑CPU，电脑产品信息等等，方便需要大家查阅数码产品最新情况，了解产品特性，能够进行对比选择最具性价比的商品。

下载
来源：php中文网
收藏 点赞
上一篇：linux定时任务访问页面代替quartz集群_html/css_WEB-ITnose 下一篇：你真的了解HTML吗？_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Flexbox布局中移动端关闭按钮丢失问题的解决方案 在移动端导航菜单中使用justify-content:space-between时，关闭按钮可能因CSS宽度单位错误、定位上下文缺失或内边距不足而消失。本教程将详细介绍如何通过修正mobile-nav容器的宽度单位、设置正确的定位上下文、对关闭按钮进行绝对定位，并调整父级容器的内边距来解决此问题，确保按钮在各种屏幕尺寸下都能正确显示。
2025-11-12 10:57:05
641
解决JavaScript日程调度器LocalStorage数据持久化问题 本教程旨在解决JavaScript日程调度器中LocalStorage数据持久化失效的问题。核心在于纠正保存与加载数据时键名不一致的错误。文章详细分析了原始代码中的ID匹配缺陷，并提供了优化后的JavaScript代码，通过遍历和动态获取ID来确保数据正确存取。此外，还强调了使用$(document).ready()、统一加载逻辑及有效的调试方法，以构建一个健壮且用户体验良好的日程管理应用。
2025-11-12 10:52:21
241
使用jQuery高效访问和操作HTML表格单元格教程 本教程详细介绍了如何使用jQuery库高效地选择、遍历和操作HTML表格中的单元格。文章涵盖了基础选择器、each()迭代方法、获取与设置单元格内容以及获取上下文元素等核心概念，并提供了实用的代码示例，旨在帮助开发者掌握jQuery在表格DOM操作中的应用技巧，避免常见错误，从而实现动态表格内容的管理。
2025-11-12 10:46:10
734
如何使用HTML5元素构建现代网页结构的详细教程 HTML5语义化标签提升网页结构清晰度、可读性及SEO与无障碍访问能力。通过使用、、、、、、等标签，替代传统堆砌，明确内容功能；正确嵌套如唯一性、内含、配标题，避免滥用；结合ARIA属性、合理标题层级、alt描述、标签等增强可访问性与搜索引擎理解，最终实现易维护、高性能的现代网页布局。
2025-11-12 10:17:18
494
JavaScript实现高级打字机效果：控制文本输出与后续交互链式触发 本教程详细讲解如何在网页中实现平滑的打字机文本效果，并在此基础上，通过回调函数机制，优雅地控制文本输出完成后触发后续交互，例如显示“下一段”按钮。文章将对比使用setTimeout递归和setInterval两种实现方式，并提供集成“下一段”按钮的完整示例，旨在帮助开发者构建更具交互性的动态内容展示。
2025-11-12 10:01:23
395
pdf如何添加html_PDF文档嵌入HTML内容或链接方法 将HTML转为PDF或在PDF中添加链接是连接两者的主要方式。1.可通过浏览器打印、工具转换（如Puppeteer）或服务器端生成（如wkhtmltopdf）将HTML转为PDF；2.使用Acrobat或Python库（如fpdf2）在PDF中添加网页链接；3.虽无法直接嵌入可运行HTML，但可附加HTML文件或插入二维码实现跳转；4.动态内容建议以PDF作静态摘要，配合链接或二维码引导至网页。关键是按场景选择方法。
2025-11-12 10:01:02
417
HTML网页编辑器入口 在线HTML网页版编辑工具 答案：HTML网页编辑器入口在dcode.fr/html-editor。该平台提供实时预览、简洁界面和多格式处理功能，支持代码高亮、外部资源引入及文件导出，便于学习与开发。
2025-11-12 09:49:29
232
JavaScript日期格式化：将日期转换为YYYY-MM-DD格式的实用指南 本文详细介绍了如何在JavaScript中将日期对象格式化为YYYY-MM-DD字符串。通过自定义函数，您可以灵活地处理日期组件并进行零填充，确保输出格式统一。教程将涵盖基础格式化方法的实现、如何将其应用于HTML输入字段，并探讨在集成日期选择器插件时如何处理日期输出，以满足特定的显示需求。
2025-11-12 09:29:22
654
根据复选框选择数量动态显示不同反馈信息的教程 本教程详细介绍了如何使用jQuery实现一个交互式测验系统，该系统能根据用户选中的复选框数量，动态显示不同的反馈消息。通过计数选中的复选框、利用data-feedback属性进行条件判断，并在点击提交按钮时展示相应的反馈，从而提升用户体验和测验的互动性。
2025-11-12 09:25:22
716
html如何展示公式_HTML数学公式展示（MathJax/KaTeX）方法 使用MathJax或KaTeX库可在HTML中清晰渲染数学公式。一、MathJax通过CDN引入，支持LaTeX语法，用\(…\)包裹行内公式，$$…$$包裹独立公式。二、KaTeX轻量快速，需引入CSS与JS文件，调用katex.render或renderMathInElement实现渲染。三、配置自动渲染可简化流程，MathJax通过window.MathJax设置定界符，KaTeX调用renderMathInElement扫描页面，确保公式未被转义以避免解析失败。
2025-11-12 09:23:34
254
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部