打印

仿yahoo中国侧边栏效果JS版,用时四个小时

dolldom [楼主]

银子的玩偶

高级会员

帖子: 456
体力: 922
威望: 0
当前: 北京海淀区
离线: 26 天

专长 PHP

1^# 大中小发表于 2007-10-26 15:48

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="wuelying" />
<title>yahooo</title>
<style>
* {
	margin:0;
	padding:0;
	font-size:12px;
}
img {
	border:none;
}
ul,ol {
	list-style:none;
}
#content {
	margin:20px auto;
	border:1px solid #a5b5c0;
	width:158px;
	height:241px;
	background:url(http://www.ywowy.com/code/yahoo/img/bg2.gif);
	overflow:hidden;
}
#title {
	height:17px;
	*height:16px;
	background:url(http://www.ywowy.com/code/yahoo/img/bg1.gif) repeat-x;
	border-bottom:1px solid #a5b5c0;
	padding:3px 0 0 6px;
	*padding:4px 0 0 6px;
	font-weight:700;
}
#title li {
	float:left;
	display:inline;
	width:92px;
}
#tit_l {
	float:left;
	width:92px;
	overflow:hidden;
	height:14px;
}
#tit_r {
	float:right;
	margin-top:-1px;
	*margin-top:-2px;
}
#tit_r img {
	margin-right:4px;
	cursor:pointer;
}
#tit_r img:hover {
	filter: Alpha(Opacity=70); 
	-moz-opacity: 0.7; 
	opacity: 0.7;
}
#text {
	clear:both;
	height:210px;
}
#text ul {
	background:url(http://www.ywowy.com/code/yahoo/img/number.gif) no-repeat 12px 4px;
	margin:6px 0;
}
#text li {
	padding-left:34px;
	line-height:21px;
}
#text li a {
	color:#123b8d;
	text-decoration:none;
}
#text li a:hover {
	text-decoration:underline;
}
</style>
</head>
<body>
<div id="content">
	<div id="title">
		<div id="tit_l">
			<div id="mytit">
				<ul>
					<li>热门搜索</li>
					<li>热门体育</li>
					<li>热门娱乐</li>
				</ul>
			</div>
		</div>
		<div id="tit_r"><img src="http://www.ywowy.com/code/yahoo/img/left.gif" alt="" /><img src="http://www.ywowy.com/code/yahoo/img/right.gif" alt="" /></div>
	</div>
	<div id="text">
		<ul id="c1">
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
			<li><a href="#">热门搜索的内容</a></li>
		</ul>
		
		<ul id="c2">
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
			<li><a href="#">热门体育的内容</a></li>
		</ul>
		
		<ul id="c3">
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
			<li><a href="#">热门娱乐的内容</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
/**
*File Name:yahooo.js
*Author:wuleying
*Date:2007/10/26
**/
var myTitle = document.getElementById("mytit");
myTitle.innerHTML += myTitle.innerHTML;
var lists = myTitle.getElementsByTagName("li");
var num = lists.length - 2;
//alert(num)
myTitle.style.width = (num+1) * 92;//计算标题的总长度
var ele = document.getElementById("tit_l");
var w = ele.clientWidth;
var n = 18;
var t = 40;//数值越小，速度越快
var times = new Array(n);
var k = 0;
var l = 0;
yahooo(0);
function yahooo(s)
{
	if(k >= num && s > 0)
	{
		ele.scrollLeft = w;
		k = 1;
		
	}
	if(k < 1 && s < 0)
	{
		ele.scrollLeft = (num-1) * w;
		k = num-1;
	}
	
	k += s;
	var x = ele.scrollLeft;
	var d = k * w - x;
	
	for(i=0;i<n;i++)
	(
		function()
		{
			if(times[i]) {clearTimeout(times[i])} ;
			var j = i;
			times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
		}
	)();
}
var imgs = document.getElementById("tit_r").getElementsByTagName("img");
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");
imgs[0].onclick = function()
{
	yahooo(-1);
	if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
	if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
	if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
imgs[1].onclick = function()
{
	yahooo(1);
	if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
	if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
	if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
</script>
</body>
</html>

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

FF下DOCTYPE声明加上就不能用了，所以只有在这里加上了条件注释

有什么不足请指出。。

P.S.FF下的效果似乎更好。。

DOM木偶

TOP

西部数码VPS主机1G内存仅266元

jiqinggu

中级会员

帖子: 169
体力: 369
威望: 0
离线: 46 天

2^# 大中小发表于 2007-10-26 15:53

仿的上面那个还是下面的滚动？？上面的标题那个坛子里面早就有了

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

shanlan1

中级会员

帖子: 220
体力: 426
威望: 0
当前: 上海徐汇
离线: 2 天

专长 ASP,C#

3^# 大中小发表于 2007-10-26 16:00

真是老大啊，找了老半天了啊
http://bbs.blueidea.com/thread-2801199-1-1.html
这样合成一下的话，就可以达到yahoo的效果了啊

[ 本帖最后由 shanlan1 于 2007-10-26 16:06 编辑 ]

www.51itshare.cn
www.5135info.com

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

负羽

記憶中的美好

钻石会员

帖子: 2645
体力: 5784
威望: 3
离线: 73 天

4^# 大中小发表于 2007-10-26 16:11

没有AUTOPLAY吗？

鞍山建筑装饰网 www.23ccd.com

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

enmaai

初级会员

帖子: 52
体力: 72
威望: 0
当前: 北京朝阳区
离线: 8 天

专长 前端制作,JS

5^# 大中小发表于 2007-10-26 16:29

呵呵这个我们有slideshow的

TOP

sdw65063251

完全米撒了米

高级会员

帖子: 472
体力: 609
威望: 0
当前: 北京东城区
离线: 2 天

专长 前端制作,JS

6^# 大中小发表于 2007-10-26 16:41

yahoo的好象是ajax的吧？

应该是flash的。。

一边撒谎，一边陶醉

TOP

shanlan1

中级会员

帖子: 220
体力: 426
威望: 0
当前: 上海徐汇
离线: 2 天

专长 ASP,C#

7^# 大中小发表于 2007-10-26 17:53

那你拿出来给大家看看啊#5

www.51itshare.cn
www.5135info.com

TOP

niuzuo

蜡笔小菜

中级会员

帖子: 102
体力: 218
威望: 0
离线: 2 天

8^# 大中小发表于 2007-10-26 18:15

good...好东西

TOP

riri123

中级会员

帖子: 139
体力: 324
威望: 0
当前: 河北沧州
离线: 59 天

9^# 大中小发表于 2007-10-28 15:45

yahoo那个是flash的。你这没切换效果

TOP

lx3735735

初级会员

帖子: 80
体力: 157
威望: 0
当前: 山东青岛
离线: 252 天

10^# 大中小发表于 2007-10-28 19:59

厉害
顶一个

TOP

lijingan1234567

初级会员

帖子: 69
体力: 56
威望: 0
离线: 543 天

11^# 大中小发表于 2007-11-1 14:23

望到满眼高手
收下喽

TOP

runidea2007

中级会员

帖子: 172
体力: 326
威望: 0
当前: 辽宁大连
离线: 204 天

12^# 大中小发表于 2007-11-5 01:35

这个要是能自动翻页就好了，请高人继续。。。

TOP

runidea2007

中级会员

帖子: 172
体力: 326
威望: 0
当前: 辽宁大连
离线: 204 天

13^# 大中小发表于 2007-11-5 08:43

IE6下箭头没有鼠标效果，FF中好用

TOP

dolldom [楼主]

银子的玩偶

高级会员

帖子: 456
体力: 922
威望: 0
当前: 北京海淀区
离线: 26 天

专长 PHP

14^# 大中小发表于 2007-11-5 10:13

回复 #13 runidea2007 的帖子

IE6不支持非a标签的伪类，这里也可以用JS来做

DOM木偶

TOP

runidea2007

中级会员

帖子: 172
体力: 326
威望: 0
当前: 辽宁大连
离线: 204 天

15^# 大中小发表于 2007-11-5 10:21

楼主加油，差一个自动转换就和Yahoo一样了

TOP

lsis2658

新手上路

帖子: 4
体力: 17
威望: 0
离线: 436 天

16^# 大中小发表于 2007-11-5 11:03

还差个自动转换~ 就很好了

TOP

ahzxy

新手上路

帖子: 7
体力: 20
威望: 0
离线: 48 天

17^# 大中小发表于 2007-11-5 15:55

楼主辛苦了,收下了,谢谢!

TOP

xiahaiyong

一百来斤

中级会员

帖子: 138
体力: 276
威望: 0
当前: 浙江金华
离线: 38 天

专长 网页设计,Flash,前端制作

18^# 大中小发表于 2007-11-6 08:20

主题顶上去，希望楼主或者好心人加上自动播放功能

o1o.net.ru

TOP

kucz520

中级会员

帖子: 102
体力: 208
威望: 0
当前: 安徽安庆
离线: 2 天

专长 网页设计

19^# 大中小发表于 2007-11-6 08:33

是啊，希望有高人能提供完整的就太好了！！

学习,学习!

TOP

sunboyzb

银牌会员

帖子: 595
体力: 1216
威望: 0
当前: 江苏苏州
离线: 43 天

20^# 大中小发表于 2007-11-6 09:15

加了定时自动滚动就好了,如果用户不点击就每隔几秒滚动一屏,如果用户移动到上面就停止滚动!

创世纪计算机资源网

TOP

brothong

初级会员

帖子: 47
体力: 98
威望: 0
当前: 四川德阳
离线: 3 天

21^# 大中小发表于 2007-11-6 11:36

很好。。。

www.it0838.com

TOP

runidea2007

中级会员

帖子: 172
体力: 326
威望: 0
当前: 辽宁大连
离线: 204 天

22^# 大中小发表于 2007-11-6 11:46

楼主来啊，我试了，没弄明白

TOP

rexatshanghai

新手上路

帖子: 37
体力: 2
威望: 0
离线: 291 天

23^# 大中小发表于 2007-11-6 12:02

恩做的很好
如果能用Jquery改写一下就好了

TOP