zoukankan      html  css  js  c++  java
  • 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片。单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图。效果图下:

    在线预览   源码下载

    实现的代码。

    html代码:

      <a href="#" class="but"></a>
        <div id="hf">
            <div class="con">
                <img src="images/left.png" class="left" />
                <img src="images/right.png" class="right" />
                <div class="scroll">
                    <div class="scrollCon">
                        <ul>
                            <li>
                                <img src="images/99-1.jpg" /></li>
                            <li>
                                <img src="images/11-1.jpg" /></li>
                            <li>
                                <img src="images/55-1.jpg" /></li>
                            <li>
                                <img src="images/33-1.jpg" /></li>
                            <li>
                                <img src="images/44-1.jpg" /></li>
                            <li>
                                <img src="images/55-1.jpg" /></li>
                            <li>
                                <img src="images/99-1.jpg" /></li>
                            <li>
                                <img src="images/44-1.jpg" /></li>
                            <li>
                                <img src="images/55-1.jpg" /></li>
                            <li>
                                <img src="images/99-1.jpg" /></li>
                            <li>
                                <img src="images/11-1.jpg" /></li>
                            <li>
                                <img src="images/33-1.jpg" /></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    css3代码:

    *
            {
                margin: 0px;
                padding: 0px;
            }
            body
            {
                background: url('images/55.jpg');
            }
            .but
            {
                width: 50px;
                height: 50px;
                background: url('images/rtop_1.png');
                display: block;
                position: fixed;
                top: 0px;
                right: 0px;
            }
            .but:hover
            {
                background: url('images/rtop_2.png');
            }
            #hf
            {
                width: 100%;
                height: 200px;
                background: rgba(0,0,0,0.5);
                display: none;
            }
            #hf .con
            {
                width: 1200px;
                height: 200px;
                margin: 0 auto;
                position: relative;
            }
            #hf .con .left
            {
                position: absolute;
                top: 70px;
                left: 0px;
                cursor: pointer;
            }
            #hf .con .right
            {
                position: absolute;
                top: 70px;
                right: 0px;
                cursor: pointer;
            }
            #hf .con .scroll
            {
                width: 1080px;
                height: 200px;
                overflow: hidden;
                margin: 0 auto;
                position: relative;
            }
            #hf .con .scroll .scrollCon
            {
                width: 1000%;
                height: 200px;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            .scroll .scrollCon ul li
            {
                list-style: none;
                width: 240px;
                height: 140px;
                border: 3px solid #fff;
                float: left;
                margin-left: 12px;
                margin-right: 12px;
                margin-top: 20px;
                cursor: pointer;
            }

    js代码:

    $(".but").click(function(){
        $("#hf").slideToggle("slow");  
    });
    <!-- 点击换body图 -->
    $(".scrollCon ul li").click(function(){
        var simg=$(this).find("img").attr("src");
        var bimg=simg.replace(/-d*/,'');  //根据小图找到大图的名称
        $("body").css("background","url("+bimg+")");//url("+bimg+"),添加 变量的方法
        
    });
    <!-- 点击左边按钮 -->
    var click_num=0; //初始点击次数
    
    $(".left").click(function(){
        click_num++;       //click_num+1
        if(click_num>2){
            click_num=0;
        }
        $(".scrollCon").animate({left:click_num*(-1080)},300);
    });
    $(".right").click(function(){
        click_num--;       //click_num+1
        if(click_num<0){
            click_num=2;
        }
        $(".scrollCon").animate({left:click_num*(-1080)},300);
    });

    via:http://www.w2bc.com/Article/18733

  • 相关阅读:
    SpinLock 实现
    支持正则或通配符的hashmap
    HTTP报文
    Protostuff序列化
    【转】轻量级分布式 RPC 框架
    Servlet 3特性:异步Servlet
    Web服务器的工作原理
    《恰如其分的软件架构:风险驱动的设计方法》——读书笔记
    Java socket中关闭IO流后,发生什么事?(以关闭输出流为例)
    Java Socket常见异常处理 和 网络编程需要注意的问题
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4250197.html
Copyright © 2011-2022 走看看