淘宝装修可以使用JS代码吗
/ , 3:49 PM / 关键词:
通过搜索引擎进入本站的朋友，问的最多最多的一些问题就是，可以使用JS代码吗？淘宝装修如何使用？可以链接JS文件吗？JS代码应该放在哪里？等等等等......关于JS的问题特别特别多，每天都有很多朋友在问。
这里我可以非常负责的告诉大家，淘宝店铺装修无法使用JS代码，当然也无法链接JS文件，淘宝装修自定义内容区只支持HTML代码！
当你尝试在HTML源码中加入&script type="text/javascript"&JS代码&/script&时，淘宝立马给你过滤掉！所以，即使你是个JS高手，在淘宝你也无能为力！除非你愿意花1W块成为淘宝装修市场里的模板设计师，那样你就可以随便使用各种JS特效来装修你的模板了。
那是不是说不是模板设计师就用不了JS特效呢？不是的，其实还是可以用的，但不是你想写什么样就什么样，那样淘宝岂不是全乱套了。
淘宝已经把整套JS编写成了Widget组件，你必须按照指定Widget接口编写，才能实现你想要的效果。比如你想使用JS轮播特效，只需要在DIV中加入一个CLASS，class="J_TWidget hbplaybg" 再加入一个配置参数data-widget-config=""即可，而不需要像正常编写JS代码那样，写一大堆代码。
下面，请大家看实例介绍
很多朋友在问如何实现CSS的伪类效果，（也就是如何实现a:hover的效果，淘宝不支持CSS，所以做过店铺装修的应该都知道），今天我告诉大家使用Winget组件接口，就可以实现CSS伪类效果。
以下为效果图（鼠标移动到红色背景，红色变为黑色）
全部代码：（PS：把背景颜色改成图片后，就是一个JS旋转木马功能了哦）
&div class="sub all_t1" style="width:300height:300background:#F00;"&
&div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:300height:300background:#000"&&/div&
(21 条评论)
(6 条评论)
(26 条评论)
(12 条评论)
(14 条评论)
(15 条评论)
(8 条评论)
(10 条评论)
(20 条评论)
(8 条评论)
谢谢楼主的分享，收藏个
一直在苦恼没有CSS如何变换背景这个效果！感谢博主分享！受益匪浅啊！
能交个朋友吗？ 我做淘宝有两年了，其中也做淘宝美工有过1年时间，在C店打工买不起CSS，只好不断研究淘宝开放的TWidget 代码。功夫不负有心人，现在在一家商城里做推广，但目前的美工不给力。只会做图片不懂代码，老板听我会做代码，十分欣喜，估计后面会帮着处理店铺装修的事，但这对我什么难度，可以给死板的店铺做出好多JS的效果~
感谢博主分享，能交个朋友吗？我也做过 Discuz论坛的
我QQ：三八三零七四九九四 （PS 因为不想被搜索引擎查出相关资料，麻烦加个好友了，虚心请教博主的才华学识）
论坛我注册了，但无法查看帖子什么的，怎么办？帐号：gogo131415
@gogo131415: 首先跟你说声抱歉，因为某些原因我现在不再添加qq好友，其实交朋友并不一定要qq吧，有问题在论坛里发贴就可以了，同时我也希望你能帮下其它人
注册了无法查看帖子，那是因为时间还没到，注册10分钟后即可正常发贴了。
background:#F00;&
#F00改成图片的地址就可以了吗？不行啊，呜呜。。。
@僵尸军团: 正反面效果请看这里 /archives/254/
@GXzhou: 嗯，非常感谢，您发给我的正反面效果我已经各种反复的研究怎么让他变尺寸和增加数量（不过只懂得一点DW表格的我。。。还是没有成功），天天研究，已经研究一周了，哈哈，您的每一个帖子我都非常认真的阅读了，并且尽量的修改用在自己的新店铺，对我来说真的非常重要，不仅是省钱那么简单，主要自己动手修改的模块更有意义，非常感谢您的分享！
@僵尸军团: 很高兴能帮到您！我喜欢有钻研精神的朋友，建议您去学习一下HTML与CSS，这样修改代码的时候您可以更加得心应手。
名字 (必填,如果已是注册用户请先登陆)
邮箱 (必填,不会被公开,只有站长才能看到)
网站（可填可不填，如填请加http://）
验证码 (必填)　　类似于淘宝和百度文库的评分功能；
　　效果如图：
　　　　五个五角星分别放在了一个table的五列中。下面是一个&p&,用来显示评分结果的；代码如下：
&body onload="changebg()"&
&table border="0" align="center" cellpadding="0" cellspacing="0" id="maintable"&
&tr style=" font-size:30"&
&td&☆&/td&&td&☆&/td&&td&☆&/td&&td&☆&/td&&td&☆&/td&
&p align="center" id="result"&您评了&label id="score"&&/label&分&/p&
　　body的onload事件绑定的是一个方法；js代码如下：
&script type="text/javascript"&
function getindex(arr,element) {
//参数：数组，元素；返回兄弟元素的索引
for (var i = 0; i & arr. i++) {
if (arr[i] == element) {
return -1;
function changebg() {
//为每个td设置获得焦点属性【也可以设置onclick属性】
var maintable = document.getElementById("maintable");
//获取需要设置的表格
var tds = maintable.getElementsByTagName("td");
//获取表格下的所有单元格
document.getElementById("result").style.display = "none";
//设置得分结果为隐藏
for (var i = 0; i & tds. i++) {
var td = tds[i];
td.onfocus =
td.style.cursor = "pointer";　　　　//为了设置鼠标放在五角星上呈手型
function getonfocus(){
//设置td的焦点事件，
var maintable = document.getElementById("maintable");
var tds = maintable.getElementsByTagName("td");
var index = getindex(tds, this);
//返回响应事件的索引
用this代表触发此事件的元素
document.getElementById("result").style.display = "";
//得到分数后把结果显示出来
document.getElementById("score").innerText = index + 1;
for (var i = 0; i & index+1; i++) {
tds[i].style.color = "red";
for (var i = index+1; i & tds. i++) {
tds[i].style.color = "black";
　　js代码主要有三个函数构成；
　　①：changebg()；body的onload事件绑定的函数；为了实现对每个td元素绑定onfocus事件；
　　②：getonfocus()；td元素onfocus事件的具体实现；
　　③：getindex()；有两个参数，一个是td元素的集合数组，一个是相应事件的td元素，注意使用this关键字。主要返回相应事件的元素的索引，为了把响应事件元素之前的颜色显示成红色，后面的元素显示成黑色；
阅读(...) 评论()分类排行榜
作者：木木
作者：何杨
作者：何杨
作者：苗元威
安全、高效、便捷的交易中介平台
中小企业首选SEO、全网营销服务
技术外包平台 一站式网站技术服务
高收益、移动广告、弹窗CPM
做有良心的cms技术服务提供商
提供公众号出售、求购、代售等交易中介以及增值服务。
增值电信业务经营许可证：苏B2-
编辑热线：5
A5创业网 版权所有.
扫一扫关注最新创业资讯}