1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

templatemonster上有很多不错的js效果

本帖由 laogui2006-09-23 发布。版面名称:前端开发

  1. laogui

    laogui Administrator
    管理成员

    注册:
    2005-08-30
    帖子:
    15,216
    赞:
    35
    那个把鼠标放到模板缩略图上预览大图功能里面包含很多延伸的技术

    那个进度条都是js的,我还以为是图像

    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>
    <script type="text/javascript">
    var t_id = setInterval(animate,20);
    var pos=0;
    var dir=2;
    var len=0;
    
    function animate()
    {
    var elem = document.getElementById('progress');
    if(elem != null) {
    if (pos==0) len += dir;
    if (len>32 || pos>79) pos += dir;
    if (pos>79) len -= dir;
    if (pos>79 && len==0) pos=0;
    elem.style.left = pos;
    elem.style.width = len;
    }
    }
    
    function remove_loading() {
    this.clearInterval(t_id);
    var targelem = document.getElementById('loader_container');
    targelem.style.display='none';
    targelem.style.visibility='hidden';
    var t_id = setInterval(animate,60);
    }
    </script>
    <style type="text/css">
    #loader_container {text-align:center;position:absolute;top:40%;width:100%}
    #loader {
    	font-family:Tahoma, Helvetica, sans;
    	font-size:10px;
    	color:#000000;
    	background-color:#FFFFFF;
    	padding:10px 0 16px 0;
    	margin:0 auto;
    	display:block;
    	width:135px;
    	border:1px solid #6A6A6A;
    	text-align:left;
    	z-index:255;
    }
    #progress {
    	height:5px;
    	font-size:1px;
    	width:1px;
    	position:relative;
    	top:1px;
    	left:10px;
    	background-color:#9D9D94
    }
    #loader_bg {
    	background-color:#EBEBE4;
    	position:relative;
    	top:8px;left:8px;height:7px;
    	width:113px;font-size:1px
    }
    </style>
    </head>
    
    <body>
    <div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>
    </body>
    </html>
    
     
  2. Neo

    Neo New Member

    注册:
    2005-09-05
    帖子:
    245
    赞:
    1
    学习下
     
  3. fen

    fen New Member

    注册:
    2005-12-18
    帖子:
    3,050
    赞:
    25
    帮我找几个WP的商业模板给我玩啊~~:cry:
     
  4. fyfei

    fyfei New Member

    注册:
    2005-10-07
    帖子:
    9,067
    赞:
    46
    哦。
     
  5. 沙滩凉鞋

    沙滩凉鞋 New Member

    注册:
    2005-09-06
    帖子:
    1,211
    赞:
    5
    很渣的……
    不如 LightBox ……
    这样的效果用户完全是被动式……
    不小心移过去也会有预览动作……