jQuery 前端操作

图片平滑切换

<!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();
    }
}


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
众所周知,人工智能是当前最热门的话题之一, 计算机技术与互联网技术的快速发展更是将对人工智能的研究推向一个新的高潮。 人工智能是研究模拟和扩展人类智能的理论与方法及其应用的一门新兴技术科学。 作为人工智能核心研究领域之一的机器学习, 其研究动机是为了使计算机系统具有人的学习能力以实现人工智能。 那么, 什么是机器学习呢? 机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量的学习算法。不同的学习算法在不同的行业及应用中能够表现出不同的性能和优势。目前,机器学习已成功地应用于下列领域: 互联网领域----语音识别、搜索引擎、语言翻译、垃圾邮件过滤、自然语言处理等 生物领域----基因序列分析、DNA 序列预测、蛋白质结构预测等 自动化领域----人脸识别、无人驾驶技术、图像处理、信号处理等 金融领域----证券市场分析、信用卡欺诈检测等 医学领域----疾病鉴别/诊断、流行病爆发预测等 刑侦领域----潜在犯罪识别与预测、模拟人工智能侦探等 新闻领域----新闻推荐系统等 游戏领域----游戏战略规划等 从上述所列举的应用可知,机器学习正在成为各行各业都会经常使用到的分析工具,尤其是在各领域数据量爆炸的今天,各行业都希望通过数据处理与分析手段,得到数据中有价值的信息,以便明确客户的需求和指引企业的发展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值