< !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-Type" content="text/html; charset=utf-8" /> <title>仿迅雷首页视频展示JQ版 hemin</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#2B93D2; text-decoration:none; } a:hover { color:#E31E1C; text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } /* v_show style */ .v_show { width:595px; margin:20px 0 1px 60px; } .v_caption { height:35px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat 0 0; } .v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat; text-indent:-9999px; } .v_caption .cartoon { background-position: 0 -100px; } .v_caption .variety { background-position:-100px -100px; } .highlight_tip { display:inline; float:left; margin:14px 0 0 10px; } .highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; cursor:pointer; } .highlight_tip .current { background-position:0 -220px; } .change_btn { float:left; margin:7px 0 0 10px; } .change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(http://www.hemin.cn//Photo/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; } .change_btn .prev { background-position:0 -400px; } .change_btn .next { width:31px; background-position:-30px -400px; } .v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; } .v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; } .v_content_list { position:absolute; width:2500px;top:0px; left:0px; } .v_content ul {float:left;} .v_content ul li { display:inline; float:left; margin:10px 0px 0; padding:10px; background:url(http://www.hemin.cn//Photo/v_bg.gif) no-repeat; } .v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; } .v_content ul li img { width:128px; height:96px; } .v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; } .v_content ul li h4 a { display:inline !important; height:auto !important; } .v_content ul li span { color:#666; } .v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; } .ccc{ background-color:#ccc!important;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var page = 1; var i = 4; $('.v_content_list li').click(function(){ $(this).addClass("ccc").siblings().removeClass("ccc"); }); $('.highlight_tip span').click(function(){ var $index = $('.highlight_tip span').index(this); $('.highlight_tip span').eq($index).addClass("current").siblings().removeClass("current"); if(!$('.v_content_list').is(":animated")){ if($index == 0){ $('.v_content_list').animate({left:'0px'},"slow");page = 1; }else if($index == 1){ $('.v_content_list').animate({left:'-592px'},"slow");page = 2; }else if($index == 2){ $('.v_content_list').animate({left:'-1184px'},"slow");page = 3; }else if($index == 3){ $('.v_content_list').animate({left:'-1776px'},"slow");page = 4; } } }); $('span.next').click(function(){ var $parent = $(this).parents("div.v_show"); var $v_show = $parent.find("div.v_content_list"); var $v_content = $parent.find("div.v_content"); var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i); if(!$v_show.is(":animated")){ if(page == page_count){ $v_show.animate({left:'0px'},"slow"); page = 1; }else{ $v_show.animate({left:'-='+v_width},"slow"); page++; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); }); $('span.prev').click(function(){ var $parent = $(this).parents("div.v_show"); var $v_show = $parent.find("div.v_content_list"); var $v_content = $parent.find("div.v_content"); var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i); if(!$v_show.is(":animated")){ if(page == 1){ $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow"); page = page_count; }else{ $v_show.animate({left:'+='+v_width},"slow"); page--; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="http://www.hemin.cn//Photo/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div> </body> </html>

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

ps:一直想访迅雷首页那个视频展示的，今天就有时间访了一下，参考的锋利的JQuery书里面找到第四章的案例，再那案例里面增加了一点小功能。2010.7.1
Show more »

七月 6th, 2010 in JS/JQuery | tags: JQ, 实例, 收藏 | 259 次浏览 | No Comments

面试题：纯CSS菜单和纯CSS选项卡

昨天把一部分项目做完，今天早上一来就上蓝色看了下，感觉蓝色里面的zhiz先生好学，面试题出现困难了就特意帮他写了，如看了自己好好研究下。

1.纯CSS菜单

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS的下拉菜单(www.hemin.cn)</title> <style type="text/css"> *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu table {position:absolute; top:0; left:0;} .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible;} .menu a{display:block;border:1px solid #000;background:#8192A6;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} .menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;} .menu ul ul{} .menu ul ul li {clear:both;text-align:left;font-size:12px;} .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;} .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;} </style> </head> <body> <div class="menu"> <ul> <li><a href="">menu1 </a>  <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a></li> <li><a href="#">submenu4</a></li> </ul>  </li> <li><a href="">menu2 </a>  <ul> <li><a href="">submenu1</a></li> <li><a href="">submenu2</a></li> </ul>  </li> <li><a href="">menu3 </a>  <ul> <li><a href="">submenu1</a></li> <li><a href="">submenu2</a></li> </ul>  </li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> </div> </body> </html>

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

八月 12th, 2009 in (x)Html/Css | tags: css, 实例, 面试题 | 1,111 次浏览 | 1 Comment

表格小知识

在公司经过一周多的加班，有200百多个表格页面到现在终于终止了，在途中遇到过种种小问题因不熟悉而耽误了少于时间，因为我是在去年年初从DIV+CSS学起的，表格方面并不是很熟悉，乘这个机会终于有所了解了。我就把用得最多的几个写出来
table:表格，tr：行，td:列，th:标题

1.单元格与单元格合并为一个单一的边框

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

—->主要用到：border-collapse:collapse;/*单元格与单元格合并为一个单一的边框*/

七月 12th, 2009 in (x)Html/Css | tags: 实例, 表格 | 535 次浏览 | No Comments

随写08年腾讯面试题(实习生)

今天中午在吃饭的时候一位以前的同事发来一个08年腾讯的面试题来考我，本来打算去笔架山公园散步的，结果突然下大雨去不了，后来闲着无聊就练习了下~写完后雨停了，可又太晚了，结果还是没去。嘻嘻~~~~

详细题目：http://www.hemin.cn/demo/tengxunMS08-4-18/20080418000001.doc

08腾讯实习生招聘设计类网页重构组岗位公开试题

请将答卷、作品及简历压缩后发送到：Campus@tencent.com 邮箱，投递作品请在主题标明：职位+地区+学校+姓名，如：用户研究+北京+北京大学+张三

一、 耐心填一填！（每空4分，共24分）
Show more »

六月 28th, 2009 in (x)Html/Css | tags: 实例, 面试题 | 2,671 次浏览 | 17 Comments

练习迅雷面试题

今天下午闲着在蓝色理想里面逛了下，看见迅雷面试题，感觉大家都做得不理想，我就打算练习练习一下。
详细题目
http://www.hemin.cn/demo/xunleiMS09-6-21/q.png

第一题（修正图片和ol）

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

第二题

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

六月 21st, 2009 in (x)Html/Css | tags: 实例, 面试题 | 4,104 次浏览 | 19 Comments

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

各种html+CSS实例效果更新为2010.7.27

各种javascript实例效果更新为2010.07.26

各种jquery实例效果

面试题：纯CSS菜单和纯CSS选项卡

表格小知识

随写08年腾讯面试题(实习生)

08腾讯实习生招聘设计类网页重构组岗位公开试题

练习迅雷面试题

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

各种html+CSS实例效果 更新为2010.7.27

各种javascript实例效果 更新为2010.07.26

各种jquery实例效果

面试题：纯CSS菜单和纯CSS选项卡

表格小知识

随写08年腾讯面试题(实习生)

08腾讯实习生招聘设计类网页重构组岗位公开试题

练习迅雷面试题

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析

各种html+CSS实例效果更新为2010.7.27

各种javascript实例效果更新为2010.07.26