店铺装修技巧-首页悬浮代码

效果全称:淘宝首页悬浮high翻6月,可点击开关

原效果图:之前(6.18)淘宝官网首页的,悬浮带开关的导航效果,现在没有了,看图片也差不多了,图片是当天GIF录制,连贯性不是很好。店铺装修技巧-首页悬浮代码插图

仿制的效果图:我的测试网址就不上了(免得被说成广告贴,其实我不做淘宝好多年。代码中图片链接还得换成自己的空间图片链接。),看图片也差不多了,图片是GIF录制,连贯性不是很好。(不用在意这些细节)店铺装修技巧-首页悬浮代码插图1

此效果模仿并修改自6.18淘宝首页的【悬浮导航】效果,现在好像被下掉了没有了,不知道有人注意过没有,没注意也没关系,因为我已经把它做出来了,哇哈哈哈~~~。

思路及原理:采用Widget规范 的Carousel - 旋转木马,也就是轮播,使用方法见淘宝开放平台文档中心的Widget规范;代码里采用了全屏代码;本想写成悬浮,奈何淘宝大姨妈屡屡禁止,所以就没写(喜欢悬浮和高手可以自己添加,嘿嘿)。

优点及其缺点:优点:本身无需css权限,所以就无需什么破解,也无需担心淘宝大姨妈屏蔽代码,纯轮播效果实现。事实证明(装下B):我之前写的一个帖子【仿京东-左滑展示效果】到目前为止,淘宝屏蔽了几次代码都相安无事。

缺点:需要开通免费店铺音乐服务;引用官方class的全屏代码,具有不确定因素;需要发布才能看见全部效果。(目前后二缺点可以忽略)

高手可以忽略这个部分

解读:

模块基本大小:976px × 105px

这个模块效果我写了左右各一个,这里发我写的比较完整的左侧的。

①兼容性:全理想效果只兼容IE10及其以上浏览器,正常效果IE7及以上即可。

兼容性测试

浏览器

IE5 IE6 IE7 IE8 IE9 IE10 IE11 火狐 谷歌 欧朋
PNG透明 × ×
CSS3属性

动画与过渡

× × × × ×
正常状态 × ×
理想状态 × × × × ×

 

②右侧放内容部分:

1、此部分整个模块的主要部分,又分为两小块内容,上面横幅内容和下面大导航内容

横幅大小:宽 不限(可随父级)高45px;

大导航大小:宽 不限(可随父级)高60px;

 

2、图片制作:本代码用到的图片大小为

横幅图片大小:宽866px 高45px;(在背景里)

大导航图片大小:宽247px 高56px(3个);宽115px 高56px(1个)

图片的大小我重新修改过,原来的图片不适合。图片的大小和内容可根据你需要,自行设置调整。

 

3、图片替换:横幅部分是利用背景制作,替换的时候找到对应位置,复制图片网址替换即可。大导航部分则找到对应位置,直接复制图片代码替换即可

 

③左侧开关部分:

1、此部分整个模块的点击开关部分

第一张图片为静态图片:宽97px高50px;

第二张图片为动态图片:宽97px高50px;

 

[size=10.5000pt]2、图片制作:图片基本可以不用制作。

3、图片替换:整体是用背景制作,替换的时候找到对应位置,复制图片网址替换即可。2张开关部分则找到对应位置,直接复制图片代码替换即可

 

还有右侧的按钮区域,怎么修改替换我就不写了,参照②③修改。

有一部分图片我整合到一起了,本打算全部整合一起的,替换的时候以便好替换,但考虑到新手和代码数量,只整合了部分。

其实,“③左侧开关部分”是有和“右侧的按钮区域”相同的鼠标经过变暗效果的,但是技术有限,加上需要里面的动态图片和静止图片互相切换效果,我就放弃这个部分的变暗效果。代码我已经尽量缩减了,为保证完整可看性,有部分代码没有缩减。高手可继续缩减。

 

此为C店代码

请支付 ¥0.01 购买后查看73%剩余内容
本文链接:https://dianshanghun.com/yunying/873.html
转账请注明出处,本站所有文章表格方案打包价为388元,有需要可以【点我跳转】进行购买
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭