教程集 > 脚本编程 > javascript > 正文个性产品列表显示代码

个性产品列表显示代码

发布时间：2016-11-22 编辑：jiaochengji.com

教程集为您提供个性产品列表显示代码等资源，欢迎您收藏本站，我们将为您提供最新的个性产品列表显示代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿msn动态列表</title> <link type="text/css" rel="stylesheet" href="styles/g.css" /> <style type="text/css"> .box { width:240px; border:1px solid #ccc; margin:20px; padding:20px; float:left; } .box:hover { border:1px dashed #ccc; } /*ul1 styles*/ .ul1 li { height:20px; line-height:20px; } /*ul2 styles*/ .ul2 li { height:26px; overflow:hidden; cursor:pointer; line-height:20px; padding-left:25px; } .ul2 li img { display:none; border:1px solid #ccc; float:left; margin-right:6px; } .ul2 li p {display:none;} li.ontop { height:66px; } li.ontop img { display:block; width:55px; height:55px; } li.ontop p { display:inline; color:#666; } #li1 {background:url(images/bn_i_ws_015.gif) 0 3px no-repeat;} #li2 {background:url(images/bn_i_ws_016.gif) 0 3px no-repeat;} #li3 {background:url(images/bn_i_ws_017.gif) 0 3px no-repeat;} #li4 {background:url(images/bn_i_ws_018.gif) 0 3px no-repeat;} #li5 {background:url(images/bn_i_ws_019.gif) 0 3px no-repeat;} #li6 {background:url(images/bn_i_ws_020.gif) 0 3px no-repeat;} #li7 {background:url(images/bn_i_ws_021.gif) 0 3px no-repeat;} #li8 {background:url(images/bn_i_ws_022.gif) 0 3px no-repeat;} #li9 {background:url(images/bn_i_ws_023.gif) 0 3px no-repeat;} #li10 {background:url(images/bn_i_ws_024.gif) 0 3px no-repeat;} </style> <script type="text/javascript"> function vidiexp(id) { for(i=1;i<=10;i ) { document.getElementById("li" i).className = ""; } document.getElementById("li" id).className = "ontop"; } </script> </head> <body>

<ol class="ul2"> <li id="li1" onmouseover="vidiexp(1)"> <h5>LG KW820</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li2" class="ontop" onmouseover="vidiexp(2)"> <h5>三星 SGH-B508</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li3" onmouseover="vidiexp(3)"> <h5>LG KG70(Shine)</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li4" onmouseover="vidiexp(4)"> <h5>索尼爱立信 G700</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li5" onmouseover="vidiexp(5)"> <h5>多普达 U1000</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li6" onmouseover="vidiexp(6)"> <h5>诺基亚N95 8GB</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li7" onmouseover="vidiexp(7)"> <h5>诺基亚6120c</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li8" onmouseover="vidiexp(8)"> <h5>三星U608</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li9" onmouseover="vidiexp(9)"> <h5>摩托罗拉A1200</h5>

320万拍照不高端索爱K800i跌入谷底

</li> <li id="li10" onmouseover="vidiexp(10)"> <h5>苹果 iPhone</h5>

320万拍照不高端索爱K800i跌入谷底

</li> </ol>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
php网上商城购物车代码一例
 教你如何使用JSP绘制饼图
 不同行业网站标题写法技巧详解
 拍拍产品申缩菜单
 建造者模式是什么？
用缓冲技术提高JSP应用的性能和稳定性
 js css实例超漂亮tab切换选项卡代码
 asp.net Web服务器控件教程
 通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
新蛋网的产品展示tab滑动门效果

上一篇：折叠菜单下一篇：级联导航菜单代码

[关闭]

最近更新

浏览排行

~ ~