在网站 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日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
29天前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
109 0
|
区块链
gitbook 插件 图标与LOGO
gitbook 插件 图标与LOGO
gitbook 插件 图标与LOGO
录屏软件生成gif,5分钟从下载到会用,哈哈哈
录屏软件生成gif,5分钟从下载到会用,哈哈哈
85 0
|
JavaScript 前端开发
【Axure教程】上传本地图片
【Axure教程】上传本地图片
【Axure教程】上传本地图片
|
Web App开发 存储 iOS开发
Mac系统一键下载网页图片
Mac系统一键下载网页图片
Mac系统一键下载网页图片
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
166 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
|
存储 C++ 计算机视觉
CMFCShellList和自定义ShellList结合使用,达到“直接浏览缩略图,双击打开图片”
在GOPaint的设计研究过程中,我一直希望能够实现这样的结果(A B C 3个步骤) 在我之前的博客里面,曾经有过缩略图显示的现就(http://www.cnblogs.com/jsxyhelu/p/5493329.html   ),也应用到了实际的项目中。
936 0
LICEcap方便快捷制作gif图片的工具
总是看见别人的博客里面动态的小图片,是不是有种冲动自己也想搞,但是就是不知道咋搞,这里简单介绍一款很实用的制作gif的软件. LICEcap的网址:http://www.cockos.com/licecap/ 1:打开网址如下gif图片操作。
866 0