制贴技术简介：

    图1

图2

 

介绍一下自己新近改编的一个闪片神器（模板），由两个部分组成，一个是蒙板，另一个是一组待闪照片：
1. 用一张符合你趣味的照片作蒙板用，在本例子里是用的一个有手机屏的照片(见上图1）。
2. 在Photoshop里把那个屏幕部分挖空，并单独存为png文件格式的照片。存为png格式的目的就是让挖空的那部分成为透明的空间，为后面的贴内容照片用。
3. 把多个需用的照片在Photoshop里分别裁剪成略大于屏幕部分尺寸的照片（见上图2）。
4. 分别把以上照片传到文学城或其它你能够上传的网站，并记录下每个照片的网上链接地址待用。
5. 把照片的链接分别复制替换到虚线以下列出的HTML代码里去。用蒙版照片链接替代代码里的红色标记部分； 用每个内容照片链接分别去替换绿色标记部分。内容照片的代码是在<div id="slideshow">标签里框定的，照片的数量可减可增，随你定。
6. 然后根据你内容照片的大小在 #slideshow > div { position:absolute; left:8; top:8px;;}调节左，右的像素位置，本例分别是8。

7. 另外，如果你的蒙版照片的大小不同，则还要根据你实际照片的大小来修改PicFrame里的长宽高度数值。

8.  完成上面所有部分替换后，发帖时，把修改后的所有代码复制到文学城的HIML源代码框里就行了。
如果你有一点点HTML语言代码的知识，应该是很容易应用的。

-------------------------------------------------------------------------------------------------------

<style type="text/css">#wrapper {margin:40px auto;position:relative;width:380px;height:498px;}
#PicFrame {width:380px;height:498px;position:absolute;top:0px;left:0px;no-repeat;z-index:8;}
#PicFrame > div >img {border:#ffffff 8px solid;box-shadow:2px 4px 6px rgba(0,0,0,0.4);}
#slideshow {margin:0 auto;position:relative;width:380px;height:498px;}
#slideshow > div { position:absolute; left:8; top:8px;;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script>
$(document).ready(function() {
    $(function(){
        var speed = 3000;
        var transition = 800;
        var total = $("#slideshow > div").length;
        $("#total").text(total);
        $("#slideshow > div:gt(0)").hide();
        $("#slideshow > div").mouseover(function() { stopInterval(); });
        $("#slideshow > div").mouseout(function() { startInterval(); });
    function stopInterval() {clearInterval(nextSlideTimer);};
    function startInterval() {nextSlideTimer};
        var nextSlide = function() {
        $('#slideshow > div:first')
        .fadeOut(transition)
        .next()
        .fadeIn(transition)
        .end()
        .appendTo('#slideshow');
        };
    var nextSlideTimer = setInterval(nextSlide,  speed);
    $("#nav-left").click(function() {
        clearInterval(nextSlideTimer);
        $('#slideshow > div:first')
        .fadeOut(transition);
        $('#slideshow > div:last')
        .fadeIn(transition)
        .prependTo('#slideshow');
        nextSlideTimer = setInterval(nextSlide, speed)
        setTimeout(nextSlideTimer, speed)   
    });

    $("#nav-right").click(function() {   
        clearInterval(nextSlideTimer);
            $('#slideshow > div:first')
        .fadeOut(transition)
        .next()
        .fadeIn(transition)
        .end()
        .appendTo('#slideshow');
        nextSlideTimer = setInterval(nextSlide, speed)
            setTimeout(nextSlideTimer, speed)
    });
  });
});
</script>
<div>&nbsp;</div>

<div id="wrapper">
<div id="PicFrame">
<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f658115UyG0xiz.png" style="width:100%" /></div>
</div>

<div id="slideshow">
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f72426YxlvM3.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f65453x8Azn.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f65392rd7W1.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f72GkhwZQc.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/883f731ou5m1np8.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88def7202aKoU35u.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659f8888FRdWFOg.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de3711LulubRss.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659fa73mwgl2c63.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659fa7952PCNg.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f63VR4XBxOR.png" style="width:100%" /></div>

<div><img src="http://www.wenxuecity.com/upload/album/bd/25/17/347ce6f23n5Q5po6.png" style="width:100%" /></div>
</div>
</div>

<div>&nbsp;</div>

<div>&nbsp;</div>

所有跟帖： 

• ～不懂HTML，只学过点DHTML（当年被逼的）。捞月大姐牛！随便写首打油诗回赠。。。 -瓷.宝宝- ♂ (128 bytes) () 08/31/2019 postreply 09:37:02

• 哇，诗人一枚，赞！不过那照片中的男的是俺，不会对诗，为答谢你的好诗，，也为你随便自弹自唱几句吧， -水中捞月- ♂ (227 bytes) () 08/31/2019 postreply 10:10:47

• ～水中大哥弹唱俱佳，高雅！人又长得帅，夫人一定笑呵呵！！！ -瓷.宝宝- ♂ (183 bytes) () 08/31/2019 postreply 10:28:09

• 先给帅哥交功课， 今天这作业应该不及格， 认了。 明天继续玩 -螺丝螺帽- ♀ (3014 bytes) () 08/31/2019 postreply 20:06:37

• 不错，及格！小画面估计位置需要调整，因在外，无法查看你的代码，相信你能fix it, 加油！ -水中捞月- ♂ (50 bytes) () 09/01/2019 postreply 09:35:50

• 这个太花时间，我刚坐下，不玩了，因为你说及格。60 分万岁！ -螺丝螺帽- ♀ (0 bytes) () 09/01/2019 postreply 14:46:59