低价卡首屏

老y开网店

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信名称:老y开网店

微 信 号:lakwdian

微信QQ:A8686369

如何在店铺装修中添加双层全屏海报特效

2016-7-22 19:25| 发布者: 老y| 查看: 818| 评论: 1

摘要: 最近在淘宝店铺装修中,偶尔发现了一种特效非常的大气时尚的双层全屏海报,效果及为炫酷。代码原理是底层是固定的, 不是随着页面的滚动而动,上层特效是可以随着页面的滚动而动。 好了不卖关子了,到底是什么样的 ...
        最近在淘宝店铺装修中,偶尔发现了一种特效非常的大气时尚的双层全屏海报,效果及为炫酷。代码原理是底层是固定的,
    不是随着页面的滚动而动,上层特效是可以随着页面的滚动而动。
    好了不卖关子了,到底是什么样的效果呢?大家可以看下幅动态图:

    那么如何实现这种效果呢?相信大家都已经蠢蠢欲动想要学了,
    现在我们就详细的给大家说一下代码如何使用:
    准备素材:
   一、.需要一张底部的图片和一张局部透明的顶部图片。
    要求底图大小是1920PX*737PX,顶图大小是1920PX*666PX。
    如果没有的话您可以使用我们代码中的图片来操作试试。
   二、Dreamweaver(没有这个软件的可以在百度下载)
    特效代码
  1. <div data-title="www.tbzxiu.com" style="height:645px;" class="vc2018"> 
  2. <div class="footer-more-trigger" style="width:auto;border:none 0;padding:0;width:1920px;height:666px;border:none;padding:0;top:auto;left:auto;">
  3.  <div class="footer-more-trigger" style="width:auto;border:none 0;padding:0;width:1920px;height:666px;left:-485px;top:auto;border:none;padding:0;overflow:hidden;">
  4.  <div class="footer-more-trigger" style="width:auto;border:none 0;padding:0;height:666px;width:1920px;top:auto;left:auto;"> 
  5. <div style="background-color:transparent;background-image:url(底部图片地址);background-repeat:no-repeat;height:666px;width:1920px;background-repeat:no-repeat;background-position:center top;background-attachment:fixed;"> 
  6. <div class="footer-more-trigge" style="width:auto;border:none 0;padding:0;left:0px;top:0px;width:1920px;height:666px;"> <div class="vc2018-box"> 
  7. <div class="footer-more-trigger" style="z-index:99;width:auto;border:none 0;padding:0;white-space:nowrap;left:0px;top:0px;">
  8.  <div class="main"> <div> <p style="text-align:center;"> <img border="0" src="顶部图片地址">  
  9. </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 
    操作步骤:
    在Dreamweaver(下面简称DW)中新建一个html页面,切换到代码视图,并将其中的原有代码删除。

    将上面的特效代码复制到DW中,并将制作好的图片素材上传的您的淘宝图片空间,并分别获取两张图片的图片地址,分别替换掉DW里的--底部图片地址文字和顶部图片地址文字。
    替换图片地址以后切换到设计视图,可能图片会显示不出来,这个时候注意将刚才粘贴的两张图片地址前面的https://里的s删掉就显示出来了,如图:

    在设计视图里看到图片以后,用鼠标点下选中顶层图片,然后在最下面看到属性框,里面就有热点工具:

    用鼠标点中如上图的热点工具,您可以选择矩形,圆形或者多边形任其一种,连续在图片中用鼠标按住左键画出热点区域,不过要注意的是:
    每用鼠标在图片中画出一片热点区域时,属性框里便会出现这个热点区域的属性设置信息,您需要在里面填写这个热点相应的宝贝链接。
    如下图:

    只有填写的链接,点击这块区域才会跳转到相应的宝贝详情页那里。
    好了,制作好热点以后,在DW里返回代码视图,将里面的代码全部选中,然后复制粘贴到您的淘宝通栏自定义内
   是不是效果都出来了。美翻了!
      本文来自 老y开网店(http://www.lakwdian.com) 转载请注明出处,关注官方公众号:lakwdian 每天推送淘宝装修技巧、淘宝装修特效模板,淘宝装修教程以及让你尖叫的淘宝运营实操案例、原创干货、超级干货,老y个人微信号:A8686369 每天免费解答、指导。

鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 rjyw 2016-8-8 10:20
这样的效果确实很是不错

专业网上推广兼招推广员请登陆  dwz.cn/2kThmX

查看全部评论(1)

关闭

老y推荐上一条 /1 下一条

返回顶部