A jquery-based drop-down menu to change the background image and jquery background image

A jquery-based drop-down menu to change the background image and jquery background image

Today, we will introduce a jquery-based drop-down menu to change the background image. Click the image in the upper-right corner, select a background image from the drop-down list, and click the image to change to a background image. Below:

Download Online Preview source code

Implementation code.

Html code:

  <a href="#" class="but"></a>    <div id="hf">        <div class="con">                                    <div class="scroll">                <div class="scrollCon">                    <ul>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                        <li>                            </li>                    </ul>                </div>            </div>        </div>    </div>

Css3 code:

*        {            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 Code:

$ (". But"). click (function () {$ ("# hf"). slideToggle ("slow") ;}); <! -- Click to change the body chart --> $ (". scrollCon ul li "). click (function () {var simg = $ (this ). find ("img "). attr ("src"); var bimg = simg. replace (/-\ d */, ''); // find the name of the big Image Based on the thumbnail $ (" body ").css (" background ", "url (" + bimg + ")"); // url ("+ bimg +"), add variable method}); <! -- Click the button on the left --> var click_num = 0; // the initial number of clicks $ (". 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