ICOjump – 交互设计是衔接用户与产品的工具
交互设计是衔接用户与产品的工具
[效果]近期收集的一些效果
2007年09月04日 标签:
javascript
程序代码
http://www.huddletogether.com/projects/lightbox/
HTML代码
<style type=text/css> BODY { FONT-SIZE: 12px; TEXT-ALIGN: center } UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } DIV.layout_main { MARGIN-TOP: 5px; WIDTH: 900px} DIV.layout_left { FLOAT: left; WIDTH: 427px } .title_01 { PADDING-LEFT: 10px; WIDTH: 426px; LINE-HEIGHT: 15px; HEIGHT: 22px! important; BACKGROUND-COLOR: #ff6600; TEXT-ALIGN: left } .title_01 .title_left { BORDER-TOP: #ff6600 6px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; WIDTH: 75px; COLOR: #666666; PADDING-TOP: 4px; HEIGHT: 24px; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: center } .title_01 .title_right { FONT-SIZE: 12px; FLOAT: right; WIDTH: 360px; COLOR: #ffffff } .content_13 { MARGIN-TOP: 5px; FLOAT: left; MARGIN-BOTTOM: 10px } .content_13 UL { FLOAT: left; WIDTH: 425px; LINE-HEIGHT: 150% } .content_13 LI { FLOAT: left; HEIGHT: 19px; TEXT-ALIGN: left } .content_13 .title { FONT-WEIGHT: bold; WIDTH: 100px; TEXT-ALIGN: left } .content_13 .li01 { WIDTH: 100px; TEXT-ALIGN: left } .content_13 .li02 { WIDTH: 80px; TEXT-ALIGN: left } .content_13 .li03 { WIDTH: 50px; TEXT-ALIGN: left } .content_13 .li04 { WIDTH: 170px } #box1left LI { PADDING-LEFT: 5px; PADDING-TOP: 4px; HEIGHT: 19px } #box1leftC{} .gray { COLOR: #cccccc } UL.greyText { BORDER-BOTTOM: #cccccc 1px solid } .greyText LI { TEXT-ALIGN: center } A:link { COLOR: #3d362b } A:visited { COLOR: #3d362b } A:hover { COLOR: #ff6600 } #icefable1C { FLOAT: left } </style> <meta content="MSHTML 6.00.2900.2963" name=GENERATOR></head> <body > <div class=layout_main> <!--left/start--> <div class=layout_left><!--阿里市场/start--> <div class=title_01 id=title01> <div class=title_right id=icefable1> <div id=box1left> <ul> <li><a title=成交总金额\ style="COLOR: #fff; TEXT-DECORATION: none" href="<a href="http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_sy_rollingmarket" target="_blank">http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_sy_rollingmarket</a>” target=_blank>近期成交总金额:<span style="COLOR: #fff; TEXT-DECORATION: underline">251553627</span>元</a> <a title=成交订单总数 style="COLOR: #fff; TEXT-DECORATION: none" href="<a href="http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_sy_rollingmarket" target="_blank">http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_sy_rollingmarket</a>” target=_blank>成交订单数:<span style="COLOR: #fff; TEXT-DECORATION: underline">16338</span>笔</a> </li> <li>贸易通商家: 5483669 人 供求信息数:9979572条 </li> <li>近期最新供应:1197380条 近期最新求购:17708条 </li> </ul> </div> </div> </div> <script type=text/javascript> marque(320,19,"icefable1","box1left") var scrollElem; var stopscroll; var stoptime; var preTop; var leftElem; var currentTop; var marqueesHeight; function marque(width,height,marqueName,marqueCName){ try{ marqueesHeight = height; stopscroll = false; scrollElem = document.getElementById(marqueName); with(scrollElem){ style.width = width; style.height = marqueesHeight; style.overflow = 'hidden'; noWrap = true; } scrollElem.onmouseover = new Function('stopscroll = true'); scrollElem.onmouseout = new Function('stopscroll = false'); preTop = 0; currentTop = 0; stoptime = 0; leftElem = document.getElementById(marqueCName); scrollElem.appendChild(leftElem.cloneNode(true)); init_srolltext(); }catch(e) {} } function init_srolltext(){ scrollElem.scrollTop = 0; setInterval('scrollUp()', 20); } function scrollUp(){ if(stopscroll) return; currentTop += 1; if(currentTop == marqueesHeight+1) { stoptime += 1; currentTop -= 1; if(stoptime == (marqueesHeight)*4) {//停顿时间 currentTop = 0; stoptime = 0; } }else{ preTop = scrollElem.scrollTop; scrollElem.scrollTop += 1; if(preTop == scrollElem.scrollTop){ scrollElem.scrollTop = marqueesHeight; scrollElem.scrollTop += 1; } } } </script> <!--阿里市场/end--> <!--报价产品--> <div class=content_13> <ul class=greyText> <li class=title>报价产品 </li> <li class=li02>单价 </li> <li class=li03>起定量 </li> <li class=li04>厂家<a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction0');" href="<a href="http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_quotation_more" target="_blank">http://page.china.alibaba.com/shtml/exchange/exchannel.shtml?tracelog=auction_quotation_more</a>” target=_blank>更多</a> </li> </ul> <div id=icefable1C> <div id=box1leftC> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction1');" href="<a href="http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_goods" target="_blank">http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_goods</a>” target=_blank>学生书包</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction1');" href="<a href="http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_price" target="_blank">http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_price</a>” target=_blank>68.00元/个</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction1');" href="<a href="http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_quantity" target="_blank">http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_quantity</a>” target=_blank>200个</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction1');" href="<a href="http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_company" target="_blank">http://yhls2001.cn.alibaba.com/athena/offerlist/yhls2001-sale-false.html?tracelog=auction_quotation_company</a>” target=_blank>佛山艺华皮革制品有限公司</a> </li> </ul> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction2');" href="<a href="http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_goods" target="_blank">http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_goods</a>” target=_blank>喜糖袋</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction2');" href="<a href="http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_price" target="_blank">http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_price</a>” target=_blank>0.50元/个</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction2');" href="<a href="http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_quantity" target="_blank">http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_quantity</a>” target=_blank>500个</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction2');" href="<a href="http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_company" target="_blank">http://ahcpc.cn.alibaba.com/athena/offerlist/ahcpc-sale-false.html?tracelog=auction_quotation_company</a>” target=_blank>宁国市敞篷车时尚礼品商行</a> </li> </ul> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction3');" href="<a href="http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_goods" target="_blank">http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_goods</a>” target=_blank>琉璃饰品</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction3');" href="<a href="http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_price" target="_blank">http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_price</a>” target=_blank>0.50元/粒</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction3');" href="<a href="http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_quantity" target="_blank">http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_quantity</a>” target=_blank>1000粒</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction3');" href="<a href="http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_company" target="_blank">http://bjpgwzj.cn.alibaba.com/athena/offerlist/bjpgwzj-sale-false.html?tracelog=auction_quotation_company</a>” target=_blank>北京东方亨利珠宝首饰有限公司</a> </li> </ul> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction4');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_goods" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_goods</a>” target=_blank>数码摄像机</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction4');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_price" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_price</a>” target=_blank>895.00元/台</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction4');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_quantity" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_quantity</a>” target=_blank>2台</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction4');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_company" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/50570415.html?keywords=%B9%A9%D3%A6500%CD%F2%CF%E0%CB%D8%CA%FD%C2%EB%C9%E3%CF%F1%BB%FA?tracelog=auction_quotation_company</a>” target=_blank>深圳市英贝尔实业有限公司</a> </li> </ul> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction5');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_goods" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_goods</a>” target=_blank>丝袜花</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction5');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_price" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_price</a>” target=_blank>0.55元/条</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction5');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_quantity" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_quantity</a>” target=_blank>10条</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction5');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_company" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/45445669.html?keywords=%B9%A9%D3%A6%CB%BF%CD%E0%B5%A5%C9%AB%CB%BF%CD%E0%BB%A8?tracelog=auction_quotation_company</a>” target=_blank>诸暨市草塔越健针织厂</a> </li> </ul> <ul> <li class=li01><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction6');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_goods" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_goods</a>” target=_blank>童装</a> </li> <li class=li02><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction6');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_price" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_price</a>” target=_blank>16.00元/条</a> </li> <li class=li03><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction6');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_quantity" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_quantity</a>” target=_blank>20条</a> </li> <li class=li04><a onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_auction6');" href="<a href="http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_company" target="_blank">http://detail.china.alibaba.com/buyer/offerdetail/48382648.html?keywords=%B9%A9%D3%A6%CD%AF%D7%B0?tracelog=auction_quotation_company</a>” target=_blank>湖州织里丫丫兔制衣厂</a> </li> </ul> </div> </div> </div> <script language=JavaScript> <!-- try{ var marqueesHeightC = 76; var stopscrollC = false; var scrollElemC = document.getElementById("icefable1C"); with(scrollElemC){ style.width = 420; style.height = marqueesHeightC; style.overflow = 'hidden'; noWrap = true; } scrollElemC.onmouseover = new Function('stopscrollC = true'); scrollElemC.onmouseout = new Function('stopscrollC = false'); var preTopC = 0; var currentTopC = 0; var stoptimeC = 0; var leftElemC = document.getElementById("box1leftC"); scrollElemC.appendChild(leftElemC.cloneNode(true)); init_srolltextC(); }catch(e) {} function init_srolltextC(){ scrollElemC.scrollTop = 0; setInterval('scrollUpC()', 19); } function scrollUpC(){ if(stopscrollC) return; currentTopC += 1; if(currentTopC == 77) { stoptimeC += 1; currentTopC -= 1; if(stoptime == 10) { currentTopC = 0; stoptimeC = 0; } }else{ preTopC = scrollElemC.scrollTop; scrollElemC.scrollTop += 1; if(preTopC == scrollElemC.scrollTop){ scrollElemC.scrollTop = 0; scrollElemC.scrollTop += 1; } } } //--> </script> <!--市场分类/start--><!--市场分类/end--><!--支付宝交易专区/start--><!--支付宝交易专区/end--><!--行业类目/start--><!--行业类目/start--> <!--行业类目/end--> <!--行业类目/end--> </div> </div> <!--left/end--><!--right/start--> <!--right/end--> <!--左下/start--> <!--左下/end--> </body></html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
]]>
如需转载请注明文章来源,本文链接:
http://icojump.in/?p=51
发表您宝贵的评论
姓名 (必填)
邮件 (保密) (必填)
网址
«
返回
首页
这里都有我
@ICOjump
Dribbble
关于@ICO
RSS
交互案例分享 Jump
UI
.com
微信订阅
分类
ico
(37)
wantree
(2)
1haideas
(5)
我的作品
(1)
译作
(5)
原创分享
(83)
历史文档
(89)
乐趣分享
(12)
原型
(1)
苦逼设计师
(1)
标签云
产品研究
扯谈
1sight
篮球
mac
生活
table
理论
taobao
life
seo ico 我
tan5
万树
苦逼设计师
ajax
asp
qiyi
悲剧
ppt
1haideas
Grid System
css
yui grids
gtd
game
设计笔记
八卦
极客公园
奇事
用户体验
最新文章
+
理想中的产品设计师
+
做产品的设计师
+
提高密码的安全性
+
跨界混搭的产品设计
+
设计师职位的黑历史
+
2013年的简单总结
+
element 背后的小故事
+
表单那些事
+
JumpUI.com 「交互案例分享」登场
发表您宝贵的评论