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

本文讲的是在网站 Logo 上右击时提示下载网站的 Logo 素材下载，有一天我在访问 Invision 网站时，突然想要抓取他们网站的 logo。如果运气好的话（例如你非常开心地发现他们 logo 的 SVG 文件），有时候你不需要去 Google 图片搜索，也不用普通网页搜索关键词 “Invision 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" 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 id="overlay" /div 

 div id="modal" 

 h3 Looking for our logo? /h3 

 p You clever thing. Weve prepared a a href="#0" .zip you can download /a . /p 

 p button id="close-modal-button" Close /button /p 

 /div 

还有一个计划表：

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

没问题：

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日 本文来自云栖社区合作伙伴掘金，了解相关信息可以关注掘金网站。
LICEcap方便快捷制作gif图片的工具 总是看见别人的博客里面动态的小图片，是不是有种冲动自己也想搞，但是就是不知道咋搞，这里简单介绍一款很实用的制作gif的软件. LICEcap的网址:http://www.cockos.com/licecap/ 1：打开网址如下gif图片操作。