建议新版本给站内快讯模块和首页推荐模块加上栏目切换滑动门效果。
2016-07-07 16:53 来源:www.chinab4c.com 作者:ecshop专家
建议新版本给站内快讯模块和首页推荐模块加上栏目切换滑动门效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="robots" content="all" /> <meta name="author" content= /> <meta name="Cop /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-size:12px } /* 当前模块的总宽度为250px,不合适的自己调整吧,另外改变相关图片的路径的话注意修改css样式代码的图片路径 */ #slidingBlock { width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden } #slidingBlock h4 { float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden } #slidingBlock h4.menuNo { font-weight:normal;color:#333333;background:url(images/slidingMenuLine.gif) repeat-x } #slidingBlock h4.menuOn { font-weight:bold;color:#ffffff;background:url(images/slidingMenu.gif) no-repeat } #slidingBlock DIV.slidingList_none { display:none } #slidingBlock DIV.slidingList { margin:0px;padding:5px;height:150px } #slidingBlock DIV.slidingList ul { margin:0px;padding:0px } #slidingBlock DIV.slidingList li { height:20px;line-height:20px } #slidingBlock DIV.slidingList li span { font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px } #slidingBlock DIV.slidingList li.one { background:url(images/slidingTag1.gif) no-repeat } #slidingBlock DIV.slidingList li.two { background:url(images/slidingTag2.gif) no-repeat } #slidingBlock DIV.slidingList li.thr { background:url(images/slidingTag3.gif) no-repeat } </style> </head> <body> <div id="slidingBlock"> <script language="javascript"> function switchmodTag(modtag,modcontent,modk) { for(i=1; i <4; i++) { if (i==modk) { document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";} else { document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";} } } </script> <h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();"> 最近更新</h4> <h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();"> 近期推荐</h4> <h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();"> 热门点击</h4> <div class="slidingList" id="slidingList1"> <ul> <li class="one"><span>1</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>2</span><a href="http://www.html.org.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>3</span><a href="http://www.luwei.net.cn">第一个的信息第一个的信息信息信息</a></li> <li class="one"><span>4</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>5</span><a href="http://www.jscode.cn">第一个的信息第一个的信息</a></li> </ul> </div> <div class="slidingList_none" id="slidingList2"> <ul> <li class="two"><span>1</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>2</span><a href="http://www.html.org.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>3</span><a href="http://www.luwei.net.cn">第二个的信息第二个的信息信息信息</a></li> <li class="two"><span>4</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>5</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>6</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>7</span><a href="http://www.jscode.cn">第二个的信息第二个的信息</a></li> </ul> </div> <div class="slidingList_none" id="slidingList3"> <ul> <li class="thr"><span>1</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>2</span><a href="http://www.html.org.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>3</span><a href="http://www.luwei.net.cn">第三个的信息第三个的信息信息信息</a></li> <li class="thr"><span>4</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>5</span><a href="http://www.jscode.cn">第三个的信息第三个的信息</a></li> </ul> </div> </div> <p> </p> <p> </p> <p> </p> <p>说明:如果需要点击切换的话,将onmouseover改成onclick即可,当前模块的总宽度为250px,不合适的自己调整吧,另外改变相关图片的路径的话注意修改css样式代码的图片路径</p> <p></a></p> </body> </html> |
回答:
这个代码不完善,不能实现自动滚动功能,也没有添加变量注入。请高人弄一下,然后看看加到哪里合适? mall/resource/last_news.html呢,还是哪里?请高人指点 另外我琢磨了半天也琢磨不了怎么把这个加入到首页推荐模块,如果能把这个加入到首页推荐模块的话,那就太好了,几个模块可以合为一个模块。 还有个难题是不知道怎么实现他的标题间自动滚动,就像图片自动滚动一样。 |
最近更新
常用插件
- ecshop根据订单批量发红包
ecshop根据订单批量发红包 ,大家肯定对ecshop红包不陌生,但是对ecshop订...
- ecshop商品分类名称增加样
ecshop插件介绍:本插件可以方便在后台管理,为ecshop商品分类名称增加样...
- ecshop使用手机验证码登陆
ecshop使用手机验证码登陆,这个功能很新颖,有些特殊的ecshop站点,他到...
- ecshop 手机注册验证插件
ecshop 手机注册验证插件 ,需要通过手机获短信,然后注册验证 价格:...
- ecshop中nginx实现url的重写
上几章为了让ecshop很好的在nginx上运行。我们搭配了ecshop的nginx下的工作...
ecshop热门问答
ecshop热门资料
ecshop推荐人级别是
ecshop末尾
ecshop模板共享
ecshop外贸收款
ec和dz同步登陆
ecshop不方便
ecshop修改数据库名
ecshoplib
ecshop百度快照
ecshop刷新
ecshop网站被黑
目录权限
ecshop鸡蛋
ecshop乒乓球
ecshopcode
ecshop基础
ecshop凡客模版
ecshop过虑
ecshop商品筛选
ecshop百度排名
ecshopdecode
ecshopset
ecshop加价
易用性SEO
ecshop专用订单处理
ecshopFLASHAD
ecshop购买记录缩写
ecshop后台导航添加
ecshop网店公告
ecshopoperate