在网站 Logo 上右击时提示下载网站的 Logo 素材下载-阿里云开发者社区

开发者社区> 玄学酱> 正文

在网站 Logo 上右击时提示下载网站的 Logo 素材下载

简介: 本文讲的是在网站 Logo 上右击时提示下载网站的 Logo 素材下载,有一天我在访问 Invision 网站时,突然想要抓取他们网站的 logo。如果运气好的话(例如你非常开心地发现他们 logo 的 SVG 文件),有时候你不需要去 Google 图片搜索,也不用普通网页搜索关键词 “Invision Logo”找到一些品牌介绍页面之类网页,才可以下载 logo 图片。
+关注继续查看
本文讲的是在网站 Logo 上右击时提示下载网站的 Logo 素材下载,

有一天我在访问 Invision 网站时,突然想要抓取他们网站的 logo。如果运气好的话(例如你非常开心地发现他们 logo 的 SVG 文件),有时候你不需要去 Google 图片搜索,也不用普通网页搜索关键词 “Invision Logo”找到一些品牌介绍页面之类网页,才可以下载 logo 图片。

因此我右击了他们的 logo,希望可以通过”查看元素”从开发者工具(DevTools)中找到它的图片文件。

然而并没有出现右键菜单,而是触发了一个对话框:

我感到非常惊喜,因为这正是我想要的。

下面是一个简单的无依赖的实现方法

看这个来自 Chris Coyier(@chriscoyier 的示例 右击 Logo 以显示 Logo 选项)。

<iframe height="268" scrolling="no" src="//codepen.io/chriscoyier/embed/QNyeVd/?height=268&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/chriscoyier/pen/QNyeVd/">Right Click Logo to Show Logo Options</a> by Chris Coyier (<a href="http://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>

你的应用可能已经有一整套精致的系统来展示对话框了。如果是这样,那就更简单了。为 logo 绑定“右击”事件(准确来说是contextmenu)并加入你想完成的操作。

logo.addEventListener('contextmenu', function(event) {
  // do whatever you do to show a modal
}, false);

如果你当前没有实现对话框的系统,也很容易实现一个简单的版本。你需要一个浮层和一个对话框元素:

<div class="overlay" id="overlay"></div>

<div class="modal" id="modal">
  <h3>Looking for our logo?</h3>
  <p>You clever thing. We've prepared a <a href="#0">.zip you can download</a>.</p>
  <p><button id="close-modal-button">Close</button></p>
</div>

还有一个计划表:

  1. 右击 logo 时,显示浮层和对话框
  2. 点击关闭按钮时,隐藏它们

没问题:

var logo = document.querySelector("#logo");
var button = document.querySelector("#close-modal-button");
var overlay = document.querySelector("#overlay");
var modal = document.querySelector("#modal");

logo.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  overlay.classList.add("show");
  modal.classList.add("show");
}, false);

button.addEventListener('click', function(event) {
  event.preventDefault();
  overlay.classList.remove("show");
  modal.classList.remove("show");
}, false);

基本样式:

.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.overlay.show {
  display: block;
}

.modal {
  position: fixed;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 100px;
  background: white;
  padding: 20px;
  text-align: center;
  display: none;
}
.modal.show {
  display: block;
}
.modal > h3 {
  font-size: 26px;
  color: #900;
}

永远不要用你自己自定义的行为破坏原有的右键菜单,我的天,你这个根本就不应该存在的恶魔






原文发布时间为:2016年04月20日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2503 0
设计师必备的25套漂亮的网站 LOGO 设计模板
  在网络时代,你可以充分使用你的才华与创造力获得成功。在网站设计中,有一个非常重要东西,那就是网站的标志(LOGO),标志的设计必须有创意,您的网站访问者才会被吸引。今天这篇文章我一组令人眼花缭乱的网站 LOGO 设计模板,你可以借助这些精美的 LOGO 模板为你的网站打造一个与众不同的网站 LOGO 图标。
939 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8920 0
国外LOGO设计欣赏的200佳网站推荐(系列十五)
LOGO设计欣赏相关文章   23个带给你灵感的英文字体Logo设计欣赏 精美LOGO设计欣赏网站推荐(系列十四) 分享20款漂亮免费英文LOGO字体下载 30个使用大自然元素设计的Logo设计欣赏 50个使用标点符号设计的创意LOGO设计欣赏     这个系列将向大家分享国外精美Logo设计欣赏的200佳网站,设计师们可通过这些网站收集的优秀Logo作品来获取灵感,进而设计出更加时尚、更有创意的作品,设计师们也可以把自己得意的Logo作品提交到这些网站,分享给其它的设计师朋友。
885 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10522 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11327 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
20957 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20710
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载