jqery基础知识实例(二)

无缝滚动

<!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>Insert title here</title>
<style type="text/css">
#content{overflow:hidden;margin:20px auto;position:relative;width:800px;height:240px;border:5px solid red;}
#dong{position:absolute;height:240px;width:4400px;}
#dong img{display:block;float:left;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var t;
function d(){
    L=parseInt($("#dong").css("left"))-1;
    if(L<=-2200){
        L=0;
    }
    $("#dong").css('left',L+"px");
}
$().ready(function(){
    var content=$("#dong").html();
    $("#dong").html(content+content);
    t=setInterval(d,10)
    $("#content").mouseenter(function(){
        clearInterval(t);
    });
    $("#content").mouseleave(function(){
        t=setInterval(d,10);
    })
})
</script>
</head>
<body>
<div id="content">
    <div id="dong" style="left:0;top:0;">
        <img src="../images/a.jpg"/>
        <img src="../images/b.jpg"/>
        <img src="../images/c.jpg"/>
        <img src="../images/d.jpg"/>
    </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=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
#content{width:400px;border:0px solid red;margin:50px auto;}
#nav{padding:0;margin:0;background:#e2e2e2;height:28px;}
#nav li{text-align:center;list-style:none;float:left;width:70px;height:28px;line-height:28px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
function showDiv(num,allNum){
    for(var i=1;i<=allNum;i++){
        if(i==num){
            $("#div"+i).show();
            
            $("#li"+i).css("border-top","3px solid orange");
            $("#li"+i).css("background","white");
            $("#li"+i).css("border-right","1px solid orange");
            $("#li"+i).css("border-left","1px solid orange");
            $("#li"+i).css("border-bottom","0");
            $("#li"+i).css("line-height","23px");
            $("#li"+i).css("height","25px");
        }else{
            $("#div"+i).hide();
            //恢复为默认状态
            $("#li"+i).css("border","0");
            $("#li"+i).css("line-height","28px");
            $("#li"+i).css("height","28px");
            $("#li"+i).css("background",'#e2e2e2');
        }
    }
}
</script>
</head>
<body>
<div id="content">
<ul id="nav">
    <li id="li1" onmouseover="showDiv(1,4)" style="border-top:3px solid orange;background:white;border-right:1px solid orange;border-left:1px solid orange;border-bottom:0;line-height:23px;height:25px;">国内</li>
    <li id="li2" onmouseover="showDiv(2,4)">国际</li>
    <li id="li3" onmouseover="showDiv(3,4)">体育</li>
    <li id="li4" onmouseover="showDiv(4,4)">娱乐</li>
</ul>
<div id="div1">
    <ul>
        <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 id="div2" style="display:none;">
    <ul>
        <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 id="div3" style="display:none;">
    <ul>
        <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 id="div4" style="display:none;">
    <ul>
        <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>
</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=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
*{padding:0;margin:0;}
.content{width:800px;height:100px;margin:0 auto;}
#advL,#advR{top:0;position:absolute;border:5px solid orange;width:75px;font-size:50px;text-align:center;padding:20px 0;}
#advL{left:5px;}
#advR{right:5px;}
#zhezhao{display:none;opacity:0.5;filter:alpha(opacity=50);width:100%;height:100%;left:0;top:0;position:absolute;z-index:1000;background:#ccc;}
#denglu{margin:100px auto;width:300px;border:3px solid purple;background:white;display:none;position:absolute;z-index:1001;}
#denglu h1{font-size:14px;background:orange;height:30px;line-height:30px;}
#denglu h1 b{margin-left:8px;color:white;float:left;}
#denglu h1 a{float:right;margin-right:8px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var mX,mY,wL,wT,start=0;
$().ready(function(){
    //获取页面的高度
    var dH=$(document).height();
    $("#zhezhao").css("height",dH+"px");
    //denglu的left样式属性
    //得到left的值：
    $("#denglu").css('left',($(document).width()-$("#denglu").outerWidth())/2);
    $("#denglu").css('top',"100px");
    //给h1追加一个鼠标按下的事件，记录鼠标位置及窗口位置
    $("#denglu h1").mousedown(function(e){
        mX=e.pageX;
        mY=e.pageY;
        wL=parseInt($("#denglu").css('left'));
        wT=parseInt($("#denglu").css('top'));
        //alert(wT);
        start=1;
    })
    //让窗口和鼠标一起移动
    $(document).mousemove(function(e){
        if(start==1){
        curX=e.pageX;
        curY=e.pageY;
        x1=curX-mX;
        y1=curY-mY;
        $("#denglu").css('left',wL+x1+"px");
        $("#denglu").css('top',wT+y1+"px");
        }
    })
    $(document).mouseup(function(){
        start=0;
    })
    
})
function showDiv(){
    $("#zhezhao").show();
    $("#denglu").show();
}
function closeDiv(){
    $("#zhezhao").hide();
    $("#denglu").hide();
}
</script>
</head>
<body>
<div class="content" style="height:30px;line-height:30px;"><a href="javascript:showDiv();">登录</a></div>
<div id="zhezhao"></div>
<div id="denglu">
    <h1><b>登录</b><a href="javascript:closeDiv()">关闭</a></h1>
    <table>
    <tr height="30">
        <td>用户名：</td>
        <td><input type="text" name="username"/></td>
    </tr>
    <tr height="30">
        <td>密码：</td>
        <td><input type="password" name="pw"/></td>
    </tr>
    <tr height="30">
        <td colspan="2"><input type="button" value="登录"/></td>
    </tr>
    </table>
</div>
<div id="advL">天<br/>王<br/>盖<br/>地<br/>虎</div>
<div id="advR">小<br/>鸡<br/>炖<br/>蘑<br/>菇</div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
</body>
</html>
posted @ 2015-09-06 09:47  tiandi2050  阅读(133)  评论(0)  编辑  收藏  举报