域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
图形特效
>> 正文
鼠标经过箭头时,图片会向左或向右横向移动
作者:
天诚世纪
更新时间:2010-4-23 8:48:13
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|tc-21.com|---鼠标经过箭头时,图片会向左或向右横向移动</title> <SCRIPT language=JavaScript type=text/JavaScript> <!-- //more javascript from http://www.tc-21.com var sh; marqueesWidth=610; preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0; function scrollLeft() { if(stopscroll==true) return; preLeft=marquees.scrollLeft; marquees.scrollLeft+=2; if(preLeft==marquees.scrollLeft) { //marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1; } } function scrollRight() { if(stopscroll==true) return; preLeft=marquees.scrollLeft; marquees.scrollLeft-=2; if(preLeft==marquees.scrollLeft) { if(!getlimit) { marquees.scrollLeft=templayer.offsetWidth*2; getlimit=marquees.scrollLeft; } marquees.scrollLeft-=1; } } function Left() { stopscroll = false; sh = setInterval("scrollLeft()",20); } function Right() { stopscroll = false; sh = setInterval("scrollRight()",20); } function StopScroll() { stopscroll = true; clearInterval( sh ); } function SelectType(value) { document.all.sendForm.page.value = 1; document.all.sendForm.type.value = value; document.all.sendForm.submit(); } function init() { with(marquees) { style.height=0; style.width=marqueesWidth; style.overflowX="hidden"; style.overflowY="visible"; style.align = "center"; noWrap=true; } } //--> </SCRIPT> </head> <!--body区域内代码--> <body onload="init()"> <TABLE cellSpacing=1 width=660 align=center border=0> <TR bgColor=#f8f8f8> <TD align=middle width=25><IMG src="/ITCenter/UploadFiles_2217/201004/20100423092822788.gif" border=0 onmouseout=StopScroll() onmouseover=Left() style="CURSOR: pointer"></TD> <TD> <DIV id=marquees> <TABLE border=0><TR> <TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825520.jpg' border=0></td> </tr><tr><td><div align="center">第1期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825712.jpg' border=0></td> </tr><tr><td><div align="center">第2期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825897.jpg' border=0></td> </tr><tr><td><div align="center">第1期 </div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825278.jpg' border=0></td> </tr><tr><td><div align="center">第1期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092826869.jpg' border=0></td> </tr><tr><td><div align="center">第2期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825278.jpg' border=0></td> </tr><tr><td><div align="center">第3期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092826869.jpg' border=0></td> </tr><tr><td><div align="center">第4期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825712.jpg' border=0></td> </tr><tr><td><div align="center">第5期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825520.jpg' border=0></td> </tr><tr><td><div align="center">第6期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='/ITCenter/UploadFiles_2217/201004/20100423092825897.jpg' border=0></td> </tr><tr><td><div align="center">第7期</div></td> </tr></table></TD> </TR></TABLE></DIV> <DIV id=templayer style="LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"></DIV></TD> <TD align=middle width=25><IMG src="/ITCenter/UploadFiles_2217/201004/20100423092826882.gif" border=0 onmouseout=StopScroll() onmouseover=Right() style="CURSOR: pointer"></TD> </TR></TABLE> </body> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/201004/20100423084813.html
上一篇文章:
搜弧IT频道的幻灯片切换的特效源代码
下一篇文章:
点击消失的漂浮广告图片
更多关于
图形特效
的新闻
相关文章
js显示隐藏层
每次刷新后随机显示图片的效果
简单的图片放大展示效果
横向不间断的连续滚动图片/文字广告
仿拍拍paipai.com首页产品图片随机轮显切换效果
用鼠标滚轮滚动控制图片显示的大小
超酷图片放大过渡效果
超酷点击显示过渡效果
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::