仿土豆网首页效果, 焦点图片切换效果(页 1) - 前台制作与脚本专栏 - 经典论坛网页-网站-制作-设计-编程

dianfish 发表于 2008-8-29 16:05

仿土豆网首页效果, 焦点图片切换效果

突然看到[url=http://www.tudou.com/]土豆网[/url]首页图片轮换效果很漂亮, 于是就想动手学学那轮换效果的制作, 而土豆上是flash制作的, 借鉴下[url=http://bbs.blueidea.com/thread-2881604-1-1.html]pageChang[/url]想法, 用js也可实现, 暂先把这种焦点轮换命名为FocusChange.

1.对焦点图片下方进行透明处理.兼容ie6 ie7 ff透明效果
2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果
3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换

[html]<!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>byzuo.cn---焦点图片 </title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }

/* Focus_change style */
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
#focus_change_list { position:absolute; width:1800px; height:295px; }
#focus_change_list li { float:left; }
#focus_change_list li img { width:450px; height:295px; }
.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
#focus_change_btn ul { padding-left:5px; }
#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
#focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }

</style>

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
elem.style.left = "0px";
  }
  if (!elem.style.top) {
elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
return true;
  }
  if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
  }
  if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
  }
  if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
  }
  if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
focusBtnList[i].className='';
}
}

function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover = function() {
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
}

setInterval('autoFocusChange()', 5000);
function autoFocusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
if (focusBtnList[i].className == 'current') {
var currentNum = i;
}
}
if (currentNum==0 ){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
if (currentNum==1 ){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
if (currentNum==2 ){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
if (currentNum==3 ){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
}

window.onload=function(){
focusChange();
}
</script>
</head>

<body>
<div id="focus_change">
<div id="focus_change_list" style="top:0; left:0;">
<ul>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/01.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/02.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/03.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/04.jpg" alt="" /></li>
</ul>
</div>
<div class="focus_change_opacity"></div>
<div id="focus_change_btn">
<ul>
<li class="current"><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_04.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</body>
</html>[/html]
本人能力有限, 不足之处, 欢迎大家提出批评指正

你也可以预览:[url=http://www.byzuo.cn/demo/focus_change/index.html]http://www.byzuo.cn/demo/focus_change/index.html[/url]

[[i] 本帖最后由 dianfish 于 2008-8-31 11:55 编辑 [/i]]

MrShan 发表于 2008-8-30 11:07

值得收藏，留个名随时来。

scsoo 发表于 2008-8-30 11:08

值得收藏，留个名随时来。

yellky 发表于 2008-8-30 13:21

赞

不客气的拿去用了...

ps:Opera也支持...

hcz123 发表于 2008-8-30 14:08

真强大，收集一份。

bing475879749 发表于 2008-8-30 17:55

确实不错，留个名先

阿智发表于 2008-8-30 20:05

建议封装一下....可以直接引用,如果楼主受权,我来封

duluohua 发表于 2008-8-30 21:33

不错不错自己动手丰衣足食啊

jackshaw 发表于 2008-8-30 21:56

收下了，谢谢。

longyin 发表于 2008-8-31 09:11

效果挺好的,谢谢了!

Gzink 发表于 2008-8-31 09:27

[quote]原帖由 [i]阿智[/i] 于 2008-8-30 20:05 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4187184&ptid=2882621][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
建议封装一下....可以直接引用,如果楼主受权,我来封 [/quote]
我替楼主授权你，封吧，大家都需要:D

dianfish 发表于 2008-8-31 11:56

还有一些小bug存在.....要先修改一下...然后会封装下载的.

houjie828 发表于 2008-8-31 14:00

期待中啊,兄弟

wang89jun 发表于 2008-8-31 14:02

不错，看上去也挺美观的

追逐发表于 2008-8-31 14:08

有BUG,鼠标划动过程停下来,有时图片显示的不是对应的图片

abccome 发表于 2008-8-31 16:26

关注下，不错的效果，就是有时候又楼上说的BUG存在，希望能调整封装下！！

bjdfrl 发表于 2008-8-31 20:23

你这个确实可以用，我嵌入后能够运行。请帮我忙解决下面的问题把！拜托

我急需一个FLASH，荡了格[url]http://ad.jz123.cn/ad/96/jz123_96.rar[/url]，但该文件下载后HTM文件打开可以用，SWF里却是空白的。

此外，我用嵌入ASP网页后后，当地的服务器上也没有任何显示。

不知道是不是所谓的相对路径出现了问题，请大家帮忙我解决下。越详细越好！

KulooM 发表于 2008-9-1 11:32

做个记号，这个效果不错，非常喜欢……
楼主加油~

nui963 发表于 2008-9-1 12:00

这些效果网络上好像一大把

ahtcmtan 发表于 2008-9-1 16:58

等待中。。。。。。。。。。。。

irini 发表于 2008-9-1 17:03

好厉害啊！

lele1990 发表于 2008-9-1 17:09

很干净。。不错。。`嘿。收藏。`

fzq918 发表于 2008-9-1 17:13

等待封装的

dianfish 发表于 2008-9-1 23:26

[html]<!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>byzuo.cn---焦点图片 </title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }

/* Focus_change style */
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
#focus_change_list { position:absolute; width:1800px; height:295px; }
#focus_change_list li { float:left; }
#focus_change_list li img { width:450px; height:295px; }
.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
#focus_change_btn ul { padding-left:5px; }
#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
#focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }
</style>

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
elem.style.left = "0px";
  }
  if (!elem.style.top) {
elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
return true;
  }
  if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
  }
  if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
  }
  if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
  }
  if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
focusBtnList[i].className='';
}
}

function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover = function() {
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
}

setInterval('autoFocusChange()', 5000);
var atuokey = false;
function autoFocusChange() {
$('focus_change').onmouseover = function(){atuokey = true}
$('focus_change').onmouseout = function(){atuokey = false}
if(atuokey) return;
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
if (focusBtnList[i].className == 'current') {
var currentNum = i;
}
}
if (currentNum==0 ){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
if (currentNum==1 ){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
if (currentNum==2 ){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
if (currentNum==3 ){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
}

window.onload=function(){
focusChange();
}
</script>
</head>

<body>
<div id="focus_change">
<div id="focus_change_list" style="top:0; left:0;">
<ul>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/01.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/02.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/03.jpg" alt="" /></li>
<li><img src="http://www.byzuo.cn/demo/focus_change/img/04.jpg" alt="" /></li>
</ul>
</div>
<div class="focus_change_opacity"></div>
<div id="focus_change_btn">
<ul>
<li class="current"><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.byzuo.cn/demo/focus_change/img/btn_04.jpg" alt="" /></a></li>
</ul>
</div>
</div>

<div style="height:20px; background:#EEE;"></div>

</body>
</html>[/html]

修整了一些小问题 ,大家可以打包下载..我在里面more.html此页面加了一些注释,方便大家修改..... [url=http://www.byzuo.cn/demo/focus_change/focusChange.rar]封装下载地址[/url]

1.对焦点图片下方进行透明处理
2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果
3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换效果
4.当鼠标移到图片上时停止滚动
5.此效果兼容浏览器ie6、ie7、FF2.0、F3.0、opera9.5
学JS不长,个人能力有限,只是试着写,有不好的地方大家请指正....

你也可以预览: [url=http://www.byzuo.cn/demo/focus_change/index.html]http://www.byzuo.cn/demo/focus_change/index.html[/url]

[[i] 本帖最后由 dianfish 于 2008-9-1 23:29 编辑 [/i]]

ttkl3239 发表于 2008-9-3 20:45

仿土豆网首页效果, 焦点图片切换效果

xiarinm520 发表于 2008-9-3 23:06

很不错，支持一下。期待更好的作品奉献给大家。

cloudgamer 发表于 2008-9-3 23:10

[url=http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html]我也写过一个类似的[/url]

不过我是参照alibaba

TBlack 发表于 2008-9-3 23:29

IE下OK,opera下貌似有点小问题(鼠标放在第一幅图片,显示的是第二幅).
不过已经很强了,精彩的效果.

pobaby 发表于 2008-9-4 10:47

看起来很拽。。:eek:

itaoo 发表于 2008-9-4 10:56

看起来很拽

ringr00 发表于 2008-9-4 14:01

在IE中可以有很好的效果哦,但是在firefox对那个播放函数的效果就很不理想啦,楼主加油,我们写东西现在不能只单单看IE了,

kan831019 发表于 2008-9-4 15:49

很不错，支持下

ryon1986 发表于 2008-9-4 16:46

仍然有一个BUG 就是刷新页面当我第一次鼠标移到某幅图上时，自动播放仍然会继续，不会停在那不动。难道是第一次这个语句if(atuokey) return;没被执行？？

dianfish 发表于 2008-9-5 09:20

[quote]原帖由 [i]ryon1986[/i] 于 2008-9-4 16:46 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4195198&ptid=2882621][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
仍然有一个BUG 就是刷新页面当我第一次鼠标移到某幅图上时，自动播放仍然会继续，不会停在那不动。难道是第一次这个语句if(atuokey) return;没被执行？？ [/quote]
谢谢兄弟。
真的有这问题。

ryon1986 发表于 2008-9-5 09:39

[quote]原帖由 [i]dianfish[/i] 于 2008-9-5 09:20 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4195879&ptid=2882621][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]

谢谢兄弟。
真的有这问题。 [/quote]

找到原因了没，兄弟，想知道为什么会出现这种BUG，偶也在学习 JS中

lifesinger 发表于 2008-9-5 12:54

不妨看看这个，兼容所有A级浏览器：
[url]http://lifesinger.org/unicorn/examples/SlideView.html[/url]

第三个是我仿照楼主的视觉效果实现的

dianfish 发表于 2008-9-5 14:31

[quote]原帖由 [i]ryon1986[/i] 于 2008-9-5 09:39 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4195926&ptid=2882621][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]

找到原因了没，兄弟，想知道为什么会出现这种BUG，偶也在学习 JS中 [/quote]

等有时间时再看看。。可以解决的。
上班忙呀。。没时间看。

zz1001 发表于 2008-9-5 16:29

怎么又是JAVASCRIPT语句，看来我HTML没多大用处。

bolm 发表于 2008-9-5 17:16

还不错

[url]http://bolm.cn/[/url]

enigma1223 发表于 2008-9-6 11:00

这个不错，留个脚印，有空来看看！

深色街灯 发表于 2008-9-6 11:17

真的太好了,,,我也借用了,,,

448004206 发表于 2008-9-7 19:05

楼主很厉害学习中

ssmceo 发表于 2008-9-7 19:10

很不错的效果，收藏一下

bbdgvt 发表于 2008-9-7 19:35

这种效果很不错~~~收下了

BIONE 发表于 2008-9-7 20:01

谢谢　辛苦了啊

axiao521 发表于 2008-9-7 22:19

:cool: 我也来做个几号~我是新手~请大家多多关照！谢谢！

togive 发表于 2008-9-8 10:35

很不错，支持

aoshifeng 发表于 2008-9-8 11:16

不错,看来JS的功能真的很强大.收藏了,感谢楼主.

smileppd 发表于 2008-9-8 11:36

赞一个～～使劲支持下～～～

minssy 发表于 2008-9-8 12:17

收下了```谢谢了

amwdgv 发表于 2008-9-8 12:22

不错，收下学习，呵呵

laperte 发表于 2008-9-8 14:32

正好需要这方面的东西~~收藏了先~~研究研究

lolo968 发表于 2008-9-8 15:54

不错，感谢楼主分享。

yuyepiaoxue 发表于 2008-9-8 16:34

回复 5# hcz123 的帖子

很有价值的帖子

bbsonline 发表于 2008-9-10 21:57

收藏留名啊

luohuaReset 发表于 2008-9-11 09:54

修改后效果好多了~

faceless 发表于 2008-9-11 10:55

不回帖顶一下就太不厚道了。好样儿的。

haoxh 发表于 2008-9-11 14:12

不错啊,

xilao 发表于 2008-9-11 16:45

这个很实用.收下先

lanhu21cn 发表于 2008-9-11 16:55

很不错啊，封装了，就方便多了，谢谢楼主无私奉献。

页: [1] 2

经典论坛's Archiver

仿土豆网首页效果, 焦点图片切换效果

你这个确实可以用，我嵌入后能够运行。请帮我忙解决下面的问题把！拜托

仿土豆网首页效果, 焦点图片切换效果

回复 5# hcz123 的帖子