jqery

jqery

关注
发信
关注(28)粉丝(399)

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>
05-11 22:37
Powered by LMLPHP ©2024 jqery 0.047208