jQuery 前端操作

最新推荐文章于 2023-05-23 11:56:06 发布

yaganblw

最新推荐文章于 2023-05-23 11:56:06 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/yaganblw/article/details/8240580

版权

图片平滑切换

<!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>图片平滑切换</title>
<style type="text/css">
/** css Reset **/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
	padding: 0;
	margin: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}
/** css Reset end **/

/** Page  **/
body
{
    background-color:#ccc;
    margin:0 auto;
    text-align:center;
}
.main 
{
    font-size:12px;
    margin:80px auto;
    width:900px;
    height:600px;
}
#container
{
    width:800px;
    height:449px;
    position:relative;
    overflow:hidden;
}
#container .image
{
    position:absolute;
    height:449px;
    width:4800px;
}
#container .image li
{
    float:left;
    width:800px;
    height:449px;
    position:relative;
    overflow:hidden;
    background:#000;
}
#container .sign
{
    right:5px;
    bottom:5px;
    position:absolute;
}
#container .sign li
{
    float:left;
    color:Gray;
    text-align:center;
    line-height:16px;
    width:16px;
    height:16px;
    font-family:Arial;
    cursor:pointer;
    overflow:hidden;
    margin:6px 4px;
    background-color:#fff;
}

#container .sign li.on
{
    color:White;
    background-color:Maroon;  
}
/** Page end  **/
</style>
</head>
<body>
<div class="main">
  <div id="container">
    <ul class="image">
        <li><img alt="Bing" src="images/bing-1.jpg" /></li>
        <li><img alt="Bing" src="images/bing-2.jpg" /></li>
        <li><img alt="Bing" src="images/bing-3.jpg" /></li>
        <li><img alt="Bing" src="images/bing-4.jpg" /></li>
        <li><img alt="Bing" src="images/bing-5.jpg" /></li>
        <li><img alt="Bing" src="images/bing-6.jpg" /></li>
    </ul>
    <ul class="sign">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
  </div>
          
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        var len = $(".image > li").length;   //元素个数
        var i = 0;
        function turn() {
            i = $(".sign li").index($(".on"))  //获取当前种子标识
            i < len - 1 ? i++ : i = 0   //循环切换
            $(".sign li").eq(i).addClass("on").siblings("li").removeClass("on");  //高亮
            showImg(i);  //切换图片
        }
        $(".sign > li").click(function () {
            clearInterval(set);   //清除定时器
            var index = $(this).index();
            $(this).addClass("on").siblings("li").removeClass("on");
            showImg(index);
            set = setInterval(turn, 5000);
        });
        set = setInterval(turn, 5000);
    });

    function showImg(index) {
        var width = $("#container").width();
        $(".image").stop(true, false).animate({ "left": -index * width }, 500);
    }
</script>
</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>
    <title>显示与隐藏</title>
    <link type="text/css" rel="Stylesheet" href="css/global.css" />
    <style type="text/css">
    body{  
        _background-image: url(about:blank);  
        _background-attachment: fixed;
    }
    .main{ margin-top:20px; padding:10px; width:900px; height:950px;}
    .main .top { text-align:center;}
    .textbox { border:1px solid blue; width:180px;height:22px; line-height:22px;}
    .btn { margin-left:10px;height:24px; line-height:23px; width:80px; border:1px solid gray; background:#ccc; outline:none; }
    .btn:hover { background:#f4f4f4; }
    .list { margin-top:40px; padding:20px;height:800px; text-align:center;}
    .list li { border-bottom:1px solid #f2f2f2; text-align:left; padding:10px; margin-left:100px;width:600px;}
    .list .title { font-size:13px; font-weight:bold; cursor:pointer; color:Maroon; line-height:25px;}
    .list .content { color:#333; line-height:23px;} 
    /* mask */
    #overlay { background:#000;opacity:0.5;position:fixed; top:0px; left:0px; _position:absolute; width:100%; height:100%; z-index:100; display:none;}
    /* tip */
    #tip { width:400px; height:250px; background-color:White; position:fixed; _position:absolute;left:0px; top:0px; _top: expression(documentElement.scrollTop + "px"); z-index:120; line-height:23px; display:none; border-radius:4px;box-shadow:0 0 20px white; overflow:visible;}
    #tip .close {width:12px; height:12px; margin-left:380px;margin-right:2px; margin-top:4px; line-height:12px; padding:1px;  text-align:center; font-family:Arial; font-weight:bold; cursor:pointer;}
    #tip .close.hover { background:#999; color:white;}
    #tip .tip_text{ line-height:22px; padding:10px; margin-top:5px; text-align:left; border-top:1px solid #f2f2f2;}
    </style>
    <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="main">
    <div class="top">
    <span class="span_text"><input type="text" name="textbox" class="textbox" /></span> <span><input type="button" name="btn" class="btn" value="搜素" id="showmask" /></span>
    </div>
    <ul class="list">
        <li>
            <div class="title">好了歌</div>
            <div class="content">            
            世人都晓神仙好，唯有功名忘不了！古今将相在何方？荒冢一堆草没了。<br /> 
            世人都晓神仙好，唯有金银忘不了！终朝只恨聚无多，及到多时眼闭了。<br />
            世人都晓神仙好，只有姣妻忘不了！君生日日说恩情，君死又随谁去了。<br />
            世人都晓神仙好，只有儿孙忘不了！痴心父母古来多，孝顺子孙谁见了？
            </div>    
        </li>
           
        <li>
            <div class="title">西江月</div>
            <div class="content">
            无故寻愁觅恨，有时似傻如狂；纵然生得好皮囊，腹内原来草莽。<br />
            潦倒不通庶务，愚顽怕读文章；行为偏执性乖张，那管世人诽谤！<br />
            富贵不知乐业，贫穷难耐凄凉；可怜辜负好韶光，于国于家无望。<br />
            天下无能第一，古今不肖无双；寄言纨裤与高粱：莫效此儿形状！ 
            </div>    
        </li>
        <li>
            <div class="title">分骨肉</div>
            <div class="content">
            一帆风雨路三千，把骨肉家园，齐来抛闪。<br />
			恐哭损残年。高爹娘休把儿悬念：自古穷通皆有定，离合岂无缘？ <br />
			从今分两地，各自保平安。奴去也，莫牵连。 <br />
            </div>    
        </li>
        <li>
            <div class="title">葬花吟</div>
            <div class="content">
            花谢花飞飞满天，红消香断有谁怜？游丝软系飘春榭，落絮轻沾扑秀帘。
			闺中女儿惜春暮，愁绪满怀无释处；手把花锄出绣帘，忍踏落花来复去。
			柳丝榆荚自芳菲，不管桃飘与李飞；桃李明年能再发，明年闺中知有谁？
			三月香巢已垒成，梁间燕子太无情！明年花发虽可啄，却不到人去梁空巢已倾。
			一年三百六十日，风刀霜剑严相逼；明媚鲜妍能几时，一朝飘泊难寻觅。
			花开易见落难寻，阶前闷杀葬花人；独把花锄泪暗洒，洒上空枝见血痕。
			杜鹃无语正黄昏，荷锄归去掩重门；青灯照壁人初睡，冷雨敲窗被未温。
			怪侬底事倍伤神？半为怜春半恼春：怜春忽至恼忽去，至又无言去不闻。
			昨宵庭外悲歌发，知是花魂与鸟魂？花魂鸟魂总难留，鸟自无言花自羞；愿奴胁下生双翼，随花飞到天尽头。
			天尽头，何处有香丘？未若锦囊收艳骨，一抷净土掩风流。
			质本洁来还洁去，强于污淖陷渠沟。尔今死去侬收葬，未卜侬身何日丧？
			侬今葬花人笑痴，他年葬侬知是谁？试看春残花渐落，便是红颜老死时。
			一朝春尽红颜老，花落人亡两不知！ 
            </div>    
        </li>
        <li>
            <div class="title">芙蓉女儿诔</div>
            <div class="content">
            维太平不易之元，蓉桂竞芳之月，无可奈何之日，怡红院浊玉，谨以群花之蕊，冰鲛之縠，沁芳之泉，枫露之茗，四者虽微，聊以达诚申信，乃致祭于白帝宫中抚司秋艳芙蓉女儿之前曰：窃思女儿自临浊世，迄今凡十有六载。其先之乡籍姓氏，湮沦而莫能考者久矣。而玉得于衾枕栉沐之间，栖息宴游之夕，亲昵狎亵，相与共处者，仅五年八月有奇。忆女儿曩生之昔,其为质则金玉不足喻其贵，其为性则冰雪不足喻其洁，其为神则星日不足喻其精，其为貌则花月不足喻其色。姊娣悉慕媖娴，妪媪咸仰惠德。孰料鸠鸩恶其高，鹰鸷翻遭罦罬；薋葹妒其臭，茝兰竟被芟蒩鉏！花原自怯，岂奈狂飙；柳本多愁，何禁骤雨！偶遭蛊虿之谗，遂抱膏肓之疚。故樱唇红褪，韵吐呻吟；杏脸香枯，色陈顑颔。诼谣謑诟，出自屏帏；荆棘蓬榛，蔓延窗户。岂招尤则替，实攘诟而终。...
            </div>    
        </li>
    </ul>
</div>
<div id="overlay"></div>
<div id="tip">
    <div class="close">x</div>
    <div class="tip_text">
        《红楼梦》，中国古代四大名著之一，章回体长篇小说，成书于1784年（清乾隆四十九年），梦觉主人序本正式题为《红楼梦》。其原名有《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。前80回曹雪芹著，后40回高鹗续（一说是无名氏续），程伟元、高鹗整理。本书是一部具有高度思想性和高度艺术性的伟大作品，作者具有初步的民主主义思想，他对现实社会、宫廷、官场的黑暗，封建贵族阶级及其家族的腐朽，对封建的科举、婚姻、奴婢、等级制度及社会统治思想等都进行了深刻的批判，并且提出了朦胧的带有初步民主主义性质的理想和主张。
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $(".textbox").focusin(function () {
            $(this).animate({ width: "250px" }, 500);
        });
        $(".textbox").focusout(function () {
            $(this).animate({ width: "180px" }, 300);
        });
        $(".list .content").hide();
        $(".list .title").toggle(
            function () {
                $(this).next(".content").slideDown();
            },
            function () {
                $(this).next(".content").slideUp();
            }
        );

        /*  mask  */
        var html_width = $(document).width();  //网页实际大小
        var html_height = $(document).height();
        var view_width = document.documentElement.clientWidth;  //可见区域大小
        var view_height = document.documentElement.clientHeight;
        var tip = $("#tip");   //缓存jQuery对象
        var tip_width = tip.width();  //元素大小
        var tip_height = tip.height();
        $("#showmask").click(function () {
            $("#overlay").css({ "opacity": "0.5", "width": html_width, "height": html_height }).show();
            tip.css({ "left": (view_width - tip_width) / 2, "top": (view_height - tip_height) / 2 - 100 }).fadeIn("slow");
        });
        /* close */
        var close = $("#tip > .close");
        close.click(function () {
            tip.fadeOut("fast");
            $("#overlay").fadeOut("fast");
        });
        close.mouseover(function () {
            $(this).addClass("hover");
        });
        close.mouseout(function () {
            $(this).removeClass("hover");
        });
        /* IE6 fixed */
        if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
            $(window).scroll(function () {
                //针对IE6不支持fixed的处理
                var offsetTop = ((view_height - tip_height) / 2 + $(window).scrollTop()-100) + "px";
                tip.animate({ top: offsetTop }, { speed: "fast", queue: false });
            });
        }
    });
</script>
</body>
</html>

效果：

操作cookie

//设置cookie
function setCookie(name, value) {
    var day = 30;  //cookie将保存30天
    var exp = new Date();
    exp.setTime(exp.getTime() + day * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); //expires指定了cookie的生存期
}

//获取cookie
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null;
}

//删除cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);  //设置此cookie已过期
    var val = getCookie(name);
    if (val != null) {
        document.cookie = name + "=" + val + ";expires=" + exp.toGMTString();
    }
}

yaganblw

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
jQuery 前端操作

图片平滑切换图片平滑切换/** css Reset **/body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td { padding: 0; margin: 0;}table { border-collapse: collapse; border-spacing: 0;}fie
复制链接

扫一扫