实现点击小图查看大图方式

合集下载

PS--本教程的创作思路及图片渲染方法非常值得学习1

本教程的创作思路及图片渲染方法非常值得学习。

教程中用到的都是非常绚丽的素材，其中有很多是背景素材，需要自己慢慢去溶图和调色。

大致的素材都安排好后，还需要大量的渲染工作，要把人物及背景都融合起来。

工作量还是很大的。

教程中大多数素材需要自己去下载，不一定要用相同的，类似的都可以。

最终效果1、首先打开一个4200 × 5100像素的新文件，300 DPI。

素材图片已经压缩，实际新建的画面要小一点。

我们将使用/的星空图片。

<点小图查看大图><点小图查看大图>2、我们将添加更多的光。

使用色阶(Cmd/Ctrl + L)，设置为(9 – 1.00 – 255)，改变混合模式为滤色。

3、为了混合背景与图片的边缘，选择200 px的笔刷（不能选硬边的笔刷），在我们工作的图层上创建图层蒙版，打开笔刷设置。

设置散布为121%，关闭控制，数量为1，数量抖动为1%。

其他动态：不透明度抖动：0%，流量抖动：0%,两个的控制都是0，数值自己看着设置就OK。

（从这里往下到步揍5，其实没必要做的像教程里这样麻烦，自己试试，有很多方法可以达到这样的效果。

）4、去图层蒙版，使用黑色的20%不透明度的笔刷涂抹图像底部的边缘，使其与我们的黑色背景融合。

5、在图层顶部添加更多的星云图片，重复前面3个步骤。

<点小图查看大图><点小图查看大图><点小图查看大图>6、现在选择全部(Cmd / Ctrl + A)和(Cmd / Ctrl + Shift+ C)复制并粘贴到图层的顶端,设置混合模式为滤色，使用图层蒙版并用黑色填充它。

7、使用100像素的圆形笔刷(笔刷的大小可以依据你要显示的区域来改变)，用20%不透明度的笔刷涂抹，这步所作的就是突出星云主体，减少星云周边的一些亮度。

8、复制图层，右键-删除图层蒙版，设置混合模式为正常。

去滤镜-其他-高反差保留，半径6。

.设置图层为叠加。

ps作图步骤

制作闪电1、我们先来制作闪电，一会儿添加到照片中，按CTRL+N新建一个500*200像素的背景文档，然后用渐变工具拉一个黑到白的渐变填充从上到下。

2、然后执行滤镜--渲染--分层云彩，会得到条黑色的裂缝在图片中间。

3、然后按CTRL+I执行反相，这样会得到发光的裂缝。

4、再按CTRL+L调整色阶，调整成下图的效果。

5、现在我们要添加闪电，打开星战的素材图，用移动工具把刚才制作的闪电拖进到素材图中。

6、把闪电的图层混合模式改为滤色。

7、然后按CTRL+T变换改变闪电的大小，再用同样的方法制作多几条闪电。

8、用橡皮擦工具擦掉闪电图层边缘比较硬的地方、其他多余的白色。

9、我们还可以改变闪电的颜色，按CTRL+U执行色相饱和度，记得勾选着色。

10、最后为了使效果更加逼真，我们添加一些蓝色闪电的反光在人物上。

完毕。

本教程介绍下雨动画的最快捷的制作方法。

其中用到了动作，用动作的目的可以快速缩短制作时间。

其中动画的重点是雨丝的制作，需要用滤镜及一些简单的调色工具来完成。

做好雨丝后，我们再用IR连成动画即可。

最终效果<点小图查看大图>1、打开原图素材，点动作面板，点面板下面的新建按钮新建一个动作，名称自定。

再点击记录按钮，这是你的所有操作将被记录下来。

2、新建一个图层得到“图层1”，然后填充黑色。

3、执行：滤镜 > 杂色 > 添加杂色，勾选单色，参数设置如下图。

4、执行：滤镜 > 模糊 > 动感模糊，角度和距离可以自行设定，不同的数值可以产生不同的效果。

5、执行：图像 > 调整 > 亮度/对比度，参数设置如下图。

6、把图层1图层混合模式改为“滤色”，点动作面板下面的停止按钮，动作记录完成。

7、再点动作面板下面的播放按钮两次，得到另外两个图层。

8、下面开始动画编辑，点工具面板下面的IR按钮进入IR操作，在动画控制面板中新建帧，如下图。

9、共新建3个帧，每一帧对应的图层如下图。

四种方法实现在PPT中点击小图查看大图的效果

四种方法实现在PPT中点击小图查看大图的效果PPT演示中，我们常常可以见到点击小图出现相应大图的演示效果，以PowerPoint 2003为测试环境，具体介绍这4种方法的实现过程。

触发器法第一步：在幻灯片中插入两张相同的图片，并修改图片大小，在幻灯片上出现一张大图、一张小图的效果。

第二步：给大图设置进入、退出动作效果。

本例大图的进入效果为“渐变”，退出效果为“渐变式缩放”。

第三步：为大图的进入、退出动作效果设置触发器。

单击进入动作效果(动作1)右侧的下拉按钮，在打开的下拉菜单中选择“计时”命令，打开计时对话框，在计时对话框中选择“触发器”，然后选择“单击下列对象时启动效果”右侧的下拉列表(图1)，第一个pic1是幻灯片中大图的名称，第二个pic1是演示文稿中小图的名称。

因为要使用小图来控制大图的进入退出，所以这里选择小图的名称，即第二个pic1(因插入的图片名称不同，所以幻灯片中显示的图片名称不同)。

第四步：重复步骤三，为大图的退出效果设置触发器，并添加相应效果。

幻灯片放映时，单击幻灯片下面的小图时，大图出现;再次单击小图时，大图退出。

说明：触发器是PowerPoint中的一项动画控制功能，单击触发器时它会触发一个操作，包括声音、影片或动画的播放控制。

利用触发器可以让PPT具有更多的交互功能。

动作设置或超链接法第一步：添加幻灯片，幻灯片的页数由图片决定，图片有几张幻灯片就有几页，而且幻灯片要使用相同的模板。

第二步：在幻灯片中插入图片，每张小图幻灯片上都要插入，而且位置大小都要一致。

按小图的顺序，在每一张幻灯片上插入对应的大图，同样，大图的位置与大小也都要一致。

第三步：设置超链接，选中第一张小图右击鼠标，在弹出的快捷菜单中选择“超链接”命令。

在超链接对话框中，选择“本文档中的位置”，并在右侧的位置中，选择要链接到的幻灯片。

第四步：重复步骤三，为演示文稿中所有幻灯片中的小图设置超链接。

当演示文稿放映时，单击小图后会链接到大图所在的幻灯片。

十个相似图片搜索网站

三、/
Google实验室类似图片搜索：输入一个关键词后，例如“lake”，返回的页面里面点击某个图片的下面的Similar images，运用Google 类似图片搜索功能引擎，即刻为你把类似的图片全部搜索出来，展示给用户以便查看。其准确率、相似率相对比较高。
Picitup最大特点是提供相似图片搜索，即通过关键字找到初始图片，点击初始图片下面的similar pictures按钮，即可搜索与该张图片类似的图片。其实质和Google实验室类似图片搜索是一样的。
五、/
Tiltomo是由 Flickr 开发的一个搜索工具，主要用来维护Flickr 自己的图片数据库，其搜索算法主要是基于相似的主题风格或相似的色调和材质。
四、/
Picitup是一个刚开始公测的专业图片搜索引擎，功能非常强大，并支持中文关键字的搜索，是国内图片爱好者的不错选择。Picitup主要支持关键字的搜索，但在它的特色搜索项目——名人匹配搜索（Celebritymatchup）中，你可以通过上传本地照片来进行搜索，不过结果一般让人失望。Picitup可以通过在搜索结果页选择过滤方式来筛选图片，比如可以按颜色、头像（人脸）、风景、产品四种类别来过滤搜索结果。
你想凭着一张现有图片找出它的原始图片，或者是凭着一张小的缩略图找出原始大图吗？

下面的十款搜索引擎可以帮你实现，以图找图，以图搜图，以图片搜索相似的图片。
一：/
Tineye是典型的以图找图搜索引擎，输入本地硬盘上的图片或者输入图片网址，即可自动帮你搜索相似图片，搜索准确度相对来说还比较令人满意。
第三种是通过手绘图片搜索图片，这种方式其实没太大用处。GazoPa虽然有这样那样的不足之处，但也算是一个很有独创性的搜索引擎。GazoPa目前还处在内测阶段，想要加入测试的可以在官网上留下你的邮箱地址，收到邀请后你就可以测试使用了。

PPT如何设置点击小图看大图效果

PPT如何设置点击小图看大图效果为了展示某品牌汽车，需要做PPT幻灯片给大客户演示该品牌各种型号的汽车和内部结构图，具体的需求是这样的：在PowerPoint中先展示各种汽车的省略小图片，如果客户对哪款汽车有意向，则点击该小缩略图则可以看到大图片。

下面跟着小编学习吧。

PPT点击小图看大图效果的设置方法简述首先在幻灯片页面中插入一个新的演示文稿，并填充图片，可以不用考虑图片的原始大小，添加之后即可自动适应对象框的大小和位置，下面用同样的方法在幻灯片中添加其他的Microsoft PowerPoint 演示文稿对象，直至把所有需要的图片都填充添加完毕，按Ctrl+D组合键复制粘贴出多个演示文稿对象可提高操作效率。

笔者利用插入Microsoft PowerPoint演示文稿对象的方法轻松实现了这种效果。

插入新演示文稿先打开PowerPoint 2010，来到要制作缩略图效果的空白幻灯片页面，然后依次单击“插入→对象”，打开“插入对象”对话框，单击“新建”，在对象类型中选择“Microsoft PowerPoint演示文稿”，单击“确定”按钮(图1)，在该幻灯片页面中插入一个新的演示文稿。

巧妙利用背景图片插入成功后，在改幻灯片编辑区里就会出现一个类似于“图片”的对象框，这就是刚刚插入的演示文稿，选中该对象框，可以看到幻灯片编辑区内有8个黑色的控制焦点，可以拖动它，调节其大小，再把该对象框拖动到合适位置。

选中后右键单击，在弹出菜单中选择“设置背景格式”，然后在“填充”选项中选择“图片或纹理填充”(图2)。

接下来就可以从文件、剪贴板或者剪贴画中选出想要添加的图片，这里单击“文件”，然后选中要插入的图片文件，最后单击“关闭”按钮，这样就完成了第一张图片的设置。

这种采用“填充”功能来添加图片，可以不用考虑图片的原始大小，添加之后即可自动适应对象框的大小和位置。

依法炮制添加图片用同样的方法在幻灯片中添加其他的Microsoft PowerPoint演示文稿对象，填充需要的图片，直至把所有需要的图片都填充添加完毕(图3)，这样点小图看大图的缩略图效果就完成了，演示的时候只要单击幻灯片上的汽车图片，就自动打开该图片的全屏清晰大图。

龙岗电脑培训如何制作单击小图看大图的效果

三佳专注--网页设计培训、平面设计培训、网站建设龙岗电脑培训如何制作单击小图看大图的效果我们在平时浏览网页的时候，经常可以通过点击小图片，查看该图片的放大图，在课件设计时也常常需要这样的效果。

比如在美术欣赏课程上，既需要欣赏某一时期绘画作品的共性，又需要欣赏每幅画的详细内容，那么如何在PowerPoint中实现这种效果呢？其实并不难，只要在幻灯片中插入Office应用中的PowerPoint演示文稿对象就可以了，具体的操作过程，龙岗电脑培训小编就在下文为大家解释。

步骤1：在演示文稿中，新建一张仅标题版式的幻灯片，并在其中输入标题文本。

再切换到插入选项卡，单击文本组中的对象按钮。

在弹出插入对象对话框后，在对象类型列表框中选择MicrosoftPowerPoint演示文稿选项，单击确定按钮，当前幻灯片中将插入一个PowerPoint演示文稿对象，并显示为一个编辑区域，在此编辑区域中，能对插入的演示文稿对象进行编辑操作，方法与一般的PowerPoint演示文稿的编辑方法一样，我们还可以根据操作需要，对这个编辑区域调整大小和位置。

重新设计的 Office Fluent 用户界面外观使创建、演示和共享演示文稿成为一种更简单、直观的体验。

丰富的特性和功能三佳专注--网页设计培训、平面设计培训、网站建设都集中在一个经过改进、整齐有序的工作区中，既可以最大程度地防止干扰，还有助于用户更快速、轻松地获得所需的结果。

步骤2：在确定演示文稿对象的大小和位置后，插入一张需要的图片，根据需要，可将该图片设置为，与演示文稿对象相同的大小，调整好大小后，单击网页上的空白区域，退出演示文稿对象的编辑状态，用同样的方法可以继续插入其他的演示文稿对象，并分别在其中插入图片。

PPT就是Power Point的简称。

.Power Point最初并不是微软公司发明的，而是美国名校伯克利大学一位叫Robert Gaskins 的博士生发明的，之后微软通过收购的方式将Power Point收入麾下，最终成为的办公软件系列（Office）重要组件之一（还有Excel,Word等）。

js实现简单放大镜效果

js实现简单放⼤镜效果⽤js实现简单放⼤镜效果，供⼤家参考，具体内容如下此处放⼤镜实现的效果就是当⿏标放置在图⽚上会有半透明遮罩，图⽚的⼀个区域就会被放⼤，然后展⽰在右边。

当⿏标移动时右边的⼤图⽚也会局部移动。

这⾥的放⼤并不是真正的放⼤，⽽是等⽐例移动。

下⾯是实现的代码：css样式代码如下：<style>.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}.s_box img{width: 400px;height: 300px;}.s_box span{width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}.b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}.b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}.list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}.list li{float: left;margin: 0 10px;}.list li img{width: 100px;height: 80px;}</style>html代码如下：<body><div class="s_box"><img src="../img/large1.jpg" alt=""><span></span></div><div class="b_box"><img src="../img/large1.jpg" alt=""></div><ul class="list"><li><img src="../img/large1.jpg" alt=""></li><li><img src="../img/large2.jpg" alt=""></li></ul></body>js主要代码如下：// 分析:// 1.选择元素// 2.绑定事件// 3.进⼊的时候显⽰元素// 4.移动：遮罩层跟随⿏标移动的同时计算遮罩层的移动⽐例、右侧⼤图，等⽐例移动// 5.离开的时候隐藏元素<script>class Large{constructor(){this.sBox = document.querySelector(".s_box");this.sImg = document.querySelector(".s_box img");this.sSpan = document.querySelector(".s_box span");this.bBox = document.querySelector(".b_box");this.bImg = document.querySelector(".b_box img");// 点击⼩图切换⼤图的按钮this.li = document.querySelectorAll(".list li");}addEvent(){var that = this;this.sBox.onmouseover = function(){that.over();}this.sBox.onmousemove = function(eve){var e = eve || window.event;that.move(e);}this.sBox.onmouseout = function(){that.out();}// 切换图⽚按钮的点击事件：根据布局做出调整for(var i=0;i<this.li.length;i++){this.li[i].onclick = function(){that.sImg.src = this.children[0].src;that.bImg.src = this.children[0].src;}}}over(){this.sSpan.style.display = "block";this.bBox.style.display = "block";}move(e){// 计算遮罩层跟随⿏标移动时的left和topvar l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;// 边界限定if(l<0) l=0;if(t<0) t=0;if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){l = this.sBox.offsetWidth - this.sSpan.offsetWidth;}if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){t = this.sBox.offsetHeight - this.sSpan.offsetHeight;}// 设置遮罩层的位置this.sSpan.style.left = l + "px";this.sSpan.style.top = t + "px";// 根据遮罩层移动的距离计算⽐例var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);// 根据上⼀步得到的⽐例，计算右侧⼤图要移动的当前值this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";}out(){this.sSpan.style.display = "none";this.bBox.style.display = "none";}}// 启动var l = new Large();l.addEvent();</script>实现效果：更多关于放⼤镜的精彩⽂章，请点击链接查看：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

如何在页面中实现点小图看大图

如何在页面中实现点小图看大图教程正文：看见到很多朋友在论坛询问如何实现这个问题，特此在这写个教程，顺便也把源文件提供下，毕竟不是人人都会FLASH软件，呵呵第一步.下载源文件，然后用FLASH软件打开文件。

第二步.打开之后，什么也别动，只需要展开右边的库工作窗口。

第三步.展开之后，找到并展开其中的PIC文件夹。

第四步.展开后，会看到里面有9张图片，相对着背景就是页面背景图，图1小和图1大就是相对应的,小的是可以点击的小图,大的就是点击后观看的大图。

第五步.现在只需要把这9张图片换掉就可以了,点击想要更换的图片,点后点击鼠标右键,在弹出的窗口中点击属性,这时会弹出一个窗口,点击导入,选择你想要的图片,点击确定就可以更换了。

第六步.依次更换好9张图片后,按ENTER+CTRL就可以预览一下了,如果预览没问题的话,就可以在在软件菜单中选择文件→导出→导出影片,导出SWF文件,然后再导入MAKER软件就大功告成了.教你为自己的杂志添加个性图标教程正文：第一步.点文件→编辑→制作图标。

第二步.会弹出一个图标制作工具窗口第三步.点击导入图片，选择想要制作成图标的图片文件。

第四步.然后点击图标另存为，然后选择保存图标的路径，给图标文件命名保存好图标。

第五步.保存好图标后，会弹出一个窗口询问是否将图标应用到当前制作的杂志中。

第六步.如果选择是的话，图标将应用到当前制作的杂志选用，在生成页面可以看到。

导入MP3文件无效怎么办教程正文：第一步.点文件→编辑→MP3转换。

第二步.这时会弹出一个工作窗口。

第三步.点击打开，选择你所需要转换的MP3文件，这里必须是MP3文件，其他格式音乐文件暂不支持。

第四步.再点击另保存，设置好你需要把转换后的音乐保存的地址。

第五步.然后再在MP3生成质量这里选择你所需要转换的文件的质量，质量越高音质越好。

第六步.然后再点击生成，等到生成进度栏跑满即生成完毕,文件越大转换时间越长，，生成完之后会弹一个窗口询问是否将转换后的音乐存入列表，或者设置为杂志当前页的背景音乐。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

把以下代码复制到项目上即可实现点击小图看大图（原图），把width和height调整可设置显示界面大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>纯CSS Lightbox效果（无需JS）</title>
<style>
body{font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{color:#000; text-decoration:none;}
.img{border:0px;}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
<--设置大图属性-->
display: none;
position: absolute;
top: 15%;
left: 25%;
width: 632px;
height: 445px;
border: 16px solid #FFF;
border-bottom:none;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p><a href="#"onclick="document.getElementById('light').style.display ='block';document.getElementById('fade').style.display='block'"><img src ="/lab/lightbox_withoutjs/small.jpg"/></a></p>


<div id="light" class="white_content"><img src
="/lab/lightbox_withoutjs/big.jpg"/>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display
='none';document.getElementById('fade').style.display='none'">关闭</a></div> <div id="fade" class="black_overlay"></div>
</body>
</html>。