< !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

各种jQuery技巧

收集和原创各种jQuery技巧。（为了工作需要和学习得更多）

1、去除页面的右键菜单

$(function(){
   $(document).bind("contextmenu",function(e){
   return false;
   });
});

七月 4th, 2010 in JS/JQuery | tags: JQ, 技巧, 收藏 | 513 次浏览 | No Comments

各种jQuery插件

概述jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，特推荐如下。
Show more »

十二月 9th, 2009 in JS/JQuery | tags: JQ, 插件, 收藏, 表格 | 1,105 次浏览 | No Comments

各种Javascript技巧

开始学JS了，开始收集技巧了，方面学习和查找。

1. 将彻底屏蔽鼠标右键

oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)> <td>no </td></table> 可用于Table

2. 取消选取、防止复制

<body onselectstart="return false">
</body>

十一月 22nd, 2009 in JS/JQuery | tags: js, 技巧, 收藏 | 783 次浏览 | No Comments

WordPress常用PHP调用代码

要设计一个WordPress模板，首先就必须知道制作一个WordPress模板所需要调用的PHP代码，下面是 Liquidicity整理的一个WordPress模板代码列表，WPCandy又弄了一个PDF电子书版本WordPress Help Sheet，现帕兰简单翻译一下，与大家分享。下面这些都是很简单同时也是最常用的WordPress代码和它们相关的作用。

如果你正准备学着制作WordPress主题，那将非常有用。
Show more »

十一月 7th, 2009 in PHP/MySql | tags: wp, 博客, 常用, 收藏 | 1,102 次浏览 | 3 Comments

最常用的十个javascript自定义函数

如果不使用类库或者没有自己的类库，储备一些常用函数总是有好处的。

(10)addEvent

网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现：

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}

十月 23rd, 2009 in JS/JQuery | tags: js, 常用, 收藏 | 820 次浏览 | 1 Comment

配色方案

一套非常不错的配色方案，收藏分享给大家~

十月 17th, 2009 in UE/SEO | tags: 收藏, 配色, 颜色 | 1,141 次浏览 | 1 Comment

Web前端开发必备手册更新中…

收藏各种Web前端开发必备手册~~等待更新中。。。。。

HTML速查手册

CSS速查手册

九月 9th, 2009 in (x)Html/Css, AS3/Flex, JS/JQuery | tags: 手册, 收藏 | 2,422 次浏览 | 9 Comments

各种CSS bug与技巧更新为2010.3.5

最近很忙，估计要到8月8号才会忙完啊，今天休息抽空出来弄下收集的css bug与技巧。其实这个对平时重构的时候可以节省很多不必要的时间呢。。

1、容器不扩展问题
这个是经常在我切图的时候遇到的问题，如：

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

解决办法：在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了
Show more »

七月 29th, 2009 in (x)Html/Css | tags: bug, 技巧, 收藏 | 1,981 次浏览 | 11 Comments

各种浏览器css hack 更新为2009.8.7

你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:

IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别 !important；
IE7能识别*，也能识别 !important；
IE8能识别\0，不能识别*，+,_,*加!important;
FF不能识别*，但能识别 !important；
例如style=”*width:10px!important; width:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px

其中还有三种写法：
Show more »

六月 21st, 2009 in (x)Html/Css | tags: css, 技巧, 收藏 | 1,080 次浏览 | 6 Comments

Web前端开发电子书更新为2009.12.9

收集共享相关前端开发电子书~~~

CSS电子书

精通CSS：高级Web标准解决方案（语言：中文格式：PDF 大小：47.0M）
CSS禅意花园（语言：中文格式：PDF 大小：122.05M）

JavaScript电子书

精通JavaScript （语言：中文格式：PDF 大小：71.3M）
JavaScript 权威指南（第四版）附加示例源代码（语言：中文格式：PDF 大小：20.0M）
JavaScript+语言精髓与编程实践（语言：中文格式：PDF 大小：1.06M）
JavaScript程序编码规范（语言：中文格式：PDF 大小：253K）
轻轻松松学用javascript编程（语言：中文格式：PDF 大小：1.79M）
悟透JavaScript（语言：中文格式：PDF 大小：249K）

十月 25th, 2008 in (x)Html/Css, AS3/Flex, JS/JQuery | tags: 收藏, 电子书 | 1,824 次浏览 | 35 Comments

Web前端开发必备工具更新为2010.02.03

精心收藏的一些Web前端开发必备工具~~
1.IETester 0.3.5 多国语言版-同时拥有IE6、IE7、IE8（Vista兼容）
http://www.my-debugbar.com/wiki/IETester/HomePage

2.Web Developer for firefox插件
在菜单和工具栏加上多种网页开发工具
https://addons.mozilla.org/zh-CN/firefox/addon/60

3.FireBug1.3.3 for firefox插件
Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。
http://addons.sociz.com/firefox/531/
Show more »

八月 24th, 2008 in (x)Html/Css, JS/JQuery | tags: 工具, 插件, 收藏 | 1,284 次浏览 | No Comments

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

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

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

各种javascript实例效果更新为2010.07.26

各种jquery实例效果

各种jQuery技巧

各种jQuery插件

各种Javascript技巧

WordPress常用PHP调用代码

最常用的十个javascript自定义函数

配色方案

Web前端开发必备手册更新中…

HTML速查手册

CSS速查手册

各种CSS bug与技巧更新为2010.3.5

各种浏览器css hack 更新为2009.8.7

Web前端开发电子书更新为2009.12.9

CSS电子书

JavaScript电子书

Web前端开发必备工具更新为2010.02.03

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析