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

  • 相关阅读:
    Python的函数式编程: map, reduce, sorted, filter, lambda
    idea cant resolve symbo 'Table'
    idea离线下载lombok,以及lobok版本不兼容
    idea 设置author 设置黑色主题
    sbmvnmysql配置
    vue.js 接收url参数
    简单商城的数据库建表sql
    vue项目从静态页面添加后台出现的一些问题
    HTML转义字符大全
    vue dialog样式
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4250197.html
Copyright © 2011-2022 走看看