| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2255 人关注过本帖
标题:[开源]N个经典的JS效果,今日(7.18)更新一个
只看楼主 加入收藏
soojs
Rank: 2
等 级:新手上路
威 望:3
帖 子:33
专家分:0
注 册:2007-6-2
收藏
得分:0 
发的内容老是要审核,麻烦。

超多JS效果:/index" target="_blank">http://www./index 每天更新.QQ群:22035666 一般人我不告诉他
2007-07-18 10:36
soojs
Rank: 2
等 级:新手上路
威 望:3
帖 子:33
专家分:0
注 册:2007-6-2
收藏
得分:0 

仿雅虎的下拉效果_显示层效果_一个详细注解,学习的好例子


<!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=gb2312\" />
<title>仿Yahoo隐藏、显示层效果_一个详细注解,学习的好例子</title>
<style type=\"text/css\">
<!--
body{
background: #FFF;
color: #000;
font: normal 12px 宋体,arial,sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}
/*清除float*/
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}
/*分类标题*/
.class_title{
margin: 0 auto;
width: 504px;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,arial,sans-serif;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}
#tabclass1{
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
}
/*分类列表(模块一)*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 287px;
margin: 0 auto;
text-align: left;
width: 506px;
display: block;
overflow:hidden;
}
#class_cnt1 p{
margin:0;
padding:3px;
line-height:150%;
}
-->
</style>
<script language=\"javascript\" type=\"text/javascript\">
<!--
//=======================================================
//函数名称:getObject(objectId)
// 参数objectId:控件的ID值
//函数功能:获得控件的ID值
//返 回 值:ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
// 显示列表框
function displayList(){
var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度(这时高度为:0)
var max_h = 287; // 容器的最大高度

var anim = function(){
h += 10; // 每次递增50像素
//如果增加的高度开始超过容的最大高度
if(h >= max_h){
getObject('class_cnt1').style.height = \"287px\"; // 工期高度为287px(因为我们只希望容器这么高)
getObject('tabclass1').style.backgroundImage=\"url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)\"; // 让图片标签改变背景
if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减,则清楚改行为(如果不清楚,程序将一直自动运行高度每2毫秒递减)
}
else{ // 如果增加中的容器高度没有超过287px
getObject('class_cnt1').style.display=\"block\"; // 让容器可见(这样我们才能够看到容器在增高的效果)
getObject('class_cnt1').style.height = h + \"px\"; // 容器高度不断的以50px递增
}
}

var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
// 隐藏列表框
function hiddenList(){
var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度(这时高度为:287px)
var anim = function(){
h -= 10; // 每次递减50像素

if(h <= 5){
getObject('class_cnt1').style.display=\"none\"; // 内容容器不可见(当容器高度小于5px)
getObject('tabclass1').style.backgroundImage=\"url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)\";
if(tt){window.clearInterval(tt);}
}
else{
getObject('class_cnt1').style.height = h + \"px\"; // // 容器高度不断的以50px递减
}
}

var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
//=======================================================
//函数名称:showClassList()
//函数功能:隐藏-显示级分类列表框(class_cnt1)
//返 回 值:无
//=======================================================
function showClassList(){
// 如果内容容器为不可见的display:none
if(getObject('class_cnt1').style.display == \"none\"){
displayList(); // 显示内容框
}
else{ // 如果内容容器为可见的display:block
hiddenList(); // 隐藏内容框
}
}
-->
</script>
</head>
<body>
<div class=\"class_title\">
<h2 id=\"tabclass1\" onclick=\"showClassList()\" title=\"隐藏/显示信息\">分类信息</h2>
</div>
<div id=\"class_cnt1\">
<p>
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
111111111<br />
</p>
</div>
</body>
</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=gb2312\" />
<title>仿淘宝网站的导航效果--一个学习的很好例子(选项卡效果)</title>
<style type=\"text/css\">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}

#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3A81C8;
border-right-color: #3A81C8;
border-bottom-color: #3A81C8;
border-left-color: #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff950b;
border-right-color: #ff950b;
border-bottom-color: #ff950b;
border-left-color: #ff950b;
background-color: #FFECD2;
}
.content3 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE74B8;
border-right-color: #FE74B8;
border-bottom-color: #FE74B8;
border-left-color: #FE74B8;
background-color: #FFECF5;
}
.content4 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00988B;
border-right-color: #00988B;
border-bottom-color: #00988B;
border-left-color: #00988B;
background-color: #E8FFFD;
}
.content5 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #A8BC1F;
border-right-color: #A8BC1F;
border-bottom-color: #A8BC1F;
border-left-color: #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language=\"javascript\">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if (\"tag\"+i==tag)
{
document.getElementById(tag).getElementsByTagName(\"a\")[0].className=\"selectli\"+i;
document.getElementById(tag).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"selectspan\"+i;
}else{
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].className=\"\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"\";
}
if (\"content\"+i==content)
{
document.getElementById(content).className=\"\";
}else{
document.getElementById(\"content\"+i).className=\"hidecontent\";
}
document.getElementById(\"content\").className=content;
}
}
</script>
</head>
<body>
<div id=\"container\">
<div id=\"title\">
<ul>
<li id=\"tag1\"><a href=\"#\" onclick=\"switchTag('tag1','content1');this.blur();\" class=\"selectli1\"><span class=\"selectspan1\">首页</span></a></li>
<li id=\"tag2\"><a href=\"#\" onclick=\"switchTag('tag2','content2');this.blur();\"><span>下载中心</span></a></li>
<li id=\"tag3\"><a href=\"#\" onclick=\"switchTag('tag3','content3');this.blur();\"><span>产品介绍</span></a></li>
<li id=\"tag4\"><a href=\"#\" onclick=\"switchTag('tag4','content4');this.blur();\"><span>会员注册与登录</span></a></li>
<li id=\"tag5\"><a href=\"#\" onclick=\"switchTag('tag5','content5');this.blur();\"><span>联系我们</span></a></li>
</ul>
</div>
<div id=\"content\" class=\"content1\">
<div id=\"content1\"><p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度</div>
<div id=\"content2\" class=\"hidecontent\">2、不同的项目使用不同的颜色来区分</div>
<div id=\"content3\" class=\"hidecontent\">3、这回需要使用到js了,呵呵</div>
<div id=\"content4\" class=\"hidecontent\">4、背景图片只需要两个图片文件就足够,减少服务器负担</div>
<div id=\"content5\" class=\"hidecontent\">5、这是使用到的两个图片:
<table width=\"58%\" border=\"1\" cellspacing=\"2\" cellpadding=\"0\">
<tr>
<td width=\"70%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif\" width=\"250\" height=\"290\" /></td>
<td width=\"30%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif\" width=\"15\" height=\"290\" /></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</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=gb2312\" />
<title>无标题文档</title>
<style type=\"text/css\">
<!--
html,body{font-size:12px;width:100%;height:100%;margin:0;padding:0;}
.img{margin:6px 0;}
.resizebutton{background-color:#FFF;border:1px solid #000;padding:4px;cursor:pointer;cursor:hand;position:absolute;display:none;}
.scrollX{position:absolute;background-color:#FFF;border:1px outset #ffffff;filter:Alpha(Opacity=80);opacity:0.8;-moz-user-select:none;}
.scrollX div{width:227px;height:15px;background:url(http://www.blueshut.com/cj/scroll_bg.gif) no-repeat;margin:8px 6px;-moz-user-select:none;}
.scrollX div p{cursor:pointer;cursor:hand;position:static;margin-left:5px;width:17px;height:11px;background:url(http://www.blueshut.com/cj/scroll_but.gif) no-repeat;-moz-user-select:none;}
-->
</style>
<script language=\"javascript\" type=\"text/javascript\">
//----------------------------------------------------------------------------------------------
// 功能说明:用于放大图片的滚动条,可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
// 使用方法:在图片代码里加上resizeable=1,同时在onload事件里加上createResizeScroll函数
// code by: blues[2007-7-17]
//----------------------------------------------------------------------------------------------
//始初化变量
var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser;
//------------------------------------------------------------------------------------------------
//页面初始化函数
//------------------------------------------------------------------------------------------------
function winInit(){
//检测浏览器类型
var __Agt = navigator.userAgent.toLowerCase();
var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);
if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);
var _Br=__If[1], _Ver=__If[2];
__Agt=null,__If=null;
if(_Br==\"msie\"){iBrowser=0;}
else if(_Br==\"firefox\"){iBrowser=1;}
else{iBrowser=2;}
}
//------------------------------------------------------------------------------------------------
//加上滚动条
//------------------------------------------------------------------------------------------------
function createResizeScroll(){
var objs=getByTag(\"IMG\");
var i,endi=objs.length;
var oFunc;
for(i=0;i<endi;i++){
if(objs[i].getAttribute(\"resizeable\")==\"1\"){
var oFuncBox=document.createElement(\"DIV\");//滚动条框
var oFuncLine=document.createElement(\"DIV\");//滚动条背景
var oFuncBut=document.createElement(\"P\");//滚动条本体
oFuncBut.style.marginLeft=\"5px\";
oFuncBut._forobj=objs[i];
oFuncBut.onmousedown=readyMoveScrollBut;
oFuncBut.onmouseup=doneMoveScrollBut;
oFuncBox.className=\"scrollX\";
oFuncBox.style.display=\"none\";
oFuncBox.onmouseover=function(){this.style.display='block';};
oFuncBox.onmouseout=function(){this.style.display='none';};
oFuncBox.onselectstart=oFuncLine.onselectstart=oFuncBut.onselectstart=function(){return false;};//防止被选中
oFuncBox._type=oFuncLine._type=oFuncBut._type=\"ScrollX\";//给滚动条框加上标志,鼠标移出滚动条框后就要中止
oFuncLine.appendChild(oFuncBut);
oFuncBox.appendChild(oFuncLine);
objs[i].parentNode.insertBefore(oFuncBox,objs[i]);
objs[i]._width=objs[i].width;
objs[i]._height=objs[i].height;
objs[i].onmouseover=function(){this.parentNode.childNodes[0].style.display=\"block\";};
objs[i].onmouseout=function(){this.parentNode.childNodes[0].style.display=\"none\";};
}
}
}
//------------------------------------------------------------------------------------------------
//准备移动
//------------------------------------------------------------------------------------------------
function readyMoveScrollBut(e){
oScroll=this;
sScrollState=\"move\";
iScrollPos=getPostion(\"x\",e);//获取鼠标坐标并保存
this._left=parseInt(this.style.marginLeft);
var img=this._forobj;
var oImg=new Image;
oImg.src=img.src;
//滚动条的移动范围是200像素
//这里计算出宽高的换算比例并保存
img._wbl=(oImg.width-img._width)/200;
img._hbl=(oImg.height-img._height)/200;
}
//------------------------------------------------------------------------------------------------
//完成并清除全局变量
//------------------------------------------------------------------------------------------------
function doneMoveScrollBut(e){
oScroll=null;
sScrollState=null;
iScrollPos=0;
}
//------------------------------------------------------------------------------------------------
//鼠标移动
//------------------------------------------------------------------------------------------------
function moveScrollBut(e){
//获取事件源
var oEvent=getEvent(e);
if(oScroll!=null && sScrollState==\"move\"){
if(oEvent._type==\"ScrollX\"){//只有在指定的范围内触发移动
var n_x=getPostion(\"x\",e);
n_x-=iScrollPos;
n_x+=oScroll._left;
if(n_x<5)n_x=5;
if(n_x>205)n_x=205;
oScroll.style.marginLeft=n_x+\"px\";
//经过计算得出滚动条的marginLeft值(margin-left的取值范围为[5~205]px)
n_x-=5;
//将滚动条的位置值换算成宽高值(之前已经计算得到了宽高的换算比例),赋给图片
var img=oScroll._forobj;
img.width=n_x*img._wbl+img._width;
img.height=n_x*img._hbl+img._height;
}else{doneMoveScrollBut();}
}
}
//------------------------------------------------------------------------------------------------
//给对象的指定事件加上函数功能
//------------------------------------------------------------------------------------------------
function AttachEvent(object,eventName,func,cancelBubble){
var cb=cancelBubble?true:false;
eventName=eventName.toLowerCase();
if(document.attachEvent){object.attachEvent(eventName,func);}
else{object.addEventListener(eventName.substr(2),func,cb);}
}
//------------------------------------------------------------------------------------------------
//简写函数
//------------------------------------------------------------------------------------------------
function getById(str){return document.getElementById(str);}
function getByName(str){return document.getElementsByName(str);}
function getByTag(str){return document.getElementsByTagName(str);}
//------------------------------------------------------------------------------------------------
//获取鼠标坐标
//------------------------------------------------------------------------------------------------
function getPostion(XorY,e){
if(iBrowser==0){
if(XorY==\"x\"){return event.x;}
else if(XorY==\"y\"){return event.y;}
else{return false;}
}
else{
if(XorY==\"x\"){return e.pageX;}
else if(XorY==\"y\"){return e.pageY;}
else{return false;}
}
}
//------------------------------------------------------------------------------------------------
//获取事件对象
//------------------------------------------------------------------------------------------------
function getEvent(e){
if(iBrowser==0){return event.srcElement;}
else{return e.target;}
}
//------------------------------------------------------------------------------------------------
//加入事件监听
//------------------------------------------------------------------------------------------------
AttachEvent(window,\"onload\",winInit,false);
AttachEvent(window,\"onload\",createResizeScroll,false);
AttachEvent(document,\"onmousemove\",moveScrollBut,false);
AttachEvent(document,\"onmouseup\",doneMoveScrollBut,false);
</script>
</head>
<body>
<div style=\"margin:10px 0 0 40px;padding:10px 0;\">
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Bluehills.jpg\" height=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Sunset.jpg\" width=\"300\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Waterlilies.jpg\" width=\"200\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Winter.jpg\" width=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
</div>
</body>
</html>


参考地址:www.soojs.com/index


超多JS效果:/index" target="_blank">http://www./index 每天更新.QQ群:22035666 一般人我不告诉他
2007-07-19 11:39
wangchen223
Rank: 1
等 级:新手上路
帖 子:149
专家分:0
注 册:2006-7-1
收藏
得分:0 
顶你,问一下用滚动条来放大缩小图片啥意思?

2007-07-21 17:15
soojs
Rank: 2
等 级:新手上路
威 望:3
帖 子:33
专家分:0
注 册:2007-6-2
收藏
得分:0 
你移到图片上就会有滚动条出现,用来调节图片大小

超多JS效果:/index" target="_blank">http://www./index 每天更新.QQ群:22035666 一般人我不告诉他
2007-07-25 14:57
soojs
Rank: 2
等 级:新手上路
威 望:3
帖 子:33
专家分:0
注 册:2007-6-2
收藏
得分:0 

很漂亮的3D文字效果

程序代码:


很漂亮的3D文字效果

[code]

<title>很漂亮的3D文字效果</title><xml:namespace ns=\"urn:schemas-microsoft-com:vml\" prefix=\"v\"/>
<style type=\"text/css\">
v\:* { behavior: url(#default#VML); }
</style>
<BODY BGCOLOR=\"#FFFFFF\" TEXT=\"#000000\">
<script type=\"text/javascript\">
// Add as many messages as you like
var message=new Array(\"www.soojs.com\", \"HX66 Desgian\", \"javascript XINCHUANG\", \"3d super cool\")

// Set the outline-color. Add as many colors as you like
var outlinecolor=new Array(\"black\", \"black\")

// Set fillcolors 1. Add as many colors as you like
var fillcolor1=new Array(\"gray\", \"green\", \"white\", \"green\")

// Set fillcolors 2. Add as many colors as you like
var fillcolor2=new Array(\"blue\", \"olive\", \"black\", \"lime\")

// Set the letter marking the circle
var circlemark=new Array(\"-\")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity=\"60%\"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview=\"yes\"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!=\"BackCompat\")? document.documentElement : document.body //Dynamicdrive added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=5000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

var emptyspace=\"\"
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+\" \"+message[i]+\" \"+emptyspace
}

function changeform() {
if (keepinview==\"yes\") //DD added
document.getElementById(\"roofid\").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {document.getElementById('textpathid').string=\"\"
document.getElementById(\"roofid\").style.display=\"none\" //DD added
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=\"\"
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout(\"tick()\",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout(\"changeform()\",pause)
}

}

if (ie) {
document.write('<div id=\"roofid\" style=\"position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;\">')
document.write('<v:oval id=\"tc\" style=\"position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px\">')
document.write('<v:shadow on=\"t\" opacity=\"'+strengthopacity+'\"/>')
document.write('<v:stroke id=\"strokeid\" weight=\"'+strkweight+'pt\" color=\"blue\"/>')
document.write('<v:fill id=\"fillid\" on=\"True\" color=\"'+fillcolor1[0]+'\" color2=\"'+fillcolor2[0]+'\" opacity=\"'+strengthopacity+'\" opacity2=\"'+strengthopacity+'\" type=\"gradient\"/>')
document.write('<v:path textpathok=\"t\"/>')
document.write('<v:textpath id=\"textpathid\" on=\"t\" id=\"mytp\" style=\"font-family:\'Arial Black\'; \" fitpath=\"t\" string=\"\"/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent(\"onload\", changeform) //DD added code
else
window.onload=changeform
}
</script>



[/code]

[此贴子已经被作者于2007-7-25 15:12:51编辑过]


超多JS效果:/index" target="_blank">http://www./index 每天更新.QQ群:22035666 一般人我不告诉他
2007-07-25 15:06
soojs
Rank: 2
等 级:新手上路
威 望:3
帖 子:33
专家分:0
注 册:2007-6-2
收藏
得分:0 
晕啊。编辑了N次,还不成功,我真服了dvbbs

直接看效果
http://www.soojs.com/detail/detail_JQDRDOC8.html

超多JS效果:/index" target="_blank">http://www./index 每天更新.QQ群:22035666 一般人我不告诉他
2007-07-25 15:14
udbyygy
Rank: 1
等 级:新手上路
威 望:2
帖 子:226
专家分:0
注 册:2007-6-26
收藏
得分:0 
朋友,把地址贴上来,我想看看3D文字效果

2007-07-25 17:17
udbyygy
Rank: 1
等 级:新手上路
威 望:2
帖 子:226
专家分:0
注 册:2007-6-26
收藏
得分:0 
效果不错

[QUOTE]晕啊。编辑了N次,还不成功,我真服了dvbbs[/QUOTE]
是啊

2007-07-25 17:19
shaobangzhu
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2007-6-23
收藏
得分:0 
老大,实在厉害啊 ,佩服
2007-07-28 22:30
evollock
Rank: 1
等 级:新手上路
帖 子:67
专家分:0
注 册:2007-7-4
收藏
得分:0 
这个。.太强了吧..必须要顶
2007-08-01 18:04
快速回复:[开源]N个经典的JS效果,今日(7.18)更新一个
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.019423 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved