JQUERY+CSS Realization of Mobile Web page bullet-window Touch-screen Photo Album example attached source code

Last Update:2017-01-13 Source: Internet

Author: User

Tags abs bind pow touch

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today, we have to introduce a touch screen effect, we used to browse the site details page, often see such an effect, when you click on a picture, you will be the other pictures in the window mode display, and then, you can go up and down the button to achieve the picture switch.

So, how do you do that on your phone?

I lined up a group of small graphs, and when I clicked, I put the picture in the ID IMGs through jquery, and then, by positioning technology, I showed the picture:

On the click of which picture of the effect, I was through the above code to achieve, and then, the user can achieve left and right switch, we also added a count on the function.

Here, we use the TouchSwipe script, we use this script, we can implement simple swipe function. You can take a look at this site first: http://labs.skinkers.com/touchSwipe/

This kind of jquery-like notation allows us to implement some simple swipe functions,

But I always felt that there was a place in this work, not perfect, when I use vertical screen display photos, and then turn to horizontal screen, the result width can not be automatically updated, so that the effect is not perfect, the user only click on the Refresh button, window-like album to return to Normal, and then the day, we together to improve him.

Index.html Code

The code is as follows

Copy Code

<! DOCTYPE html>

<html>

<head>

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" >< /script>

<script type= "Text/javascript" src= "Js/jquery.touchswipe.min.js" ></script>

<title> touch screen effects, mobile Web </title>

<link href= "Css/css.css" Type=text/css rel=stylesheet>

</head>

<body>

<div class= "BG" ></div>

<b class= "Close" > Shutdown </b>

<span class= "S_count" ><i></i>/<em></em></span>

<ul class= "S_ul" >

<li><img src= "Images/img01.jpg" ></li>

<li><img src= "Images/img02.jpg" ></li>

<li><img src= "Images/img03.jpg" ></li>

<li><img src= "Images/img04.jpg" ></li>

<li><img src= "Images/img01.jpg" ></li>

<li><img src= "Images/img02.jpg" ></li>

<li><img src= "Images/img03.jpg" ></li>

<li><img src= "Images/img04.jpg" ></li>

</ul>

<div id= "Content" >

<ul id= "IMGs" >

</ul>

</div>

<script>

$ ('. S_ul li '). Click (function () {

$ (' #content '). Show ();

$ ('. BG '). Show ();

$ ('. Close '). Show ();

$ ('. S_count '). Show ();

$ (' #imgs '). Show ();

$ (this). Parent (). Find (' Li '). Clone (). Appendto (' #imgs ');

var n=$ ("#imgs li"). length;

var dw=100*n;

var fw=dw/64;

var fww=fw+ "%";

var dww=dw+ "%";

var ll=$ ("#imgs li"). Width (FWW);

var i=$ (this). index () +1;

$ ('. S_count em '). Text (n);

var left=-100* (i-1) + "%";

var fq=0;

$ ('. S_count i '). text (i);

$ ("#imgs li"). CSS ("-webkit-transform", "Translate3d" ("+left+", 0px,0px));

$ (' #imgs '). Width (DWW);

var img_width =100+ "%";

$ ("#imgs Li"). Swipe ({

Swipeleft:function () {

var d=$ (this). index ();

d=d+1;

i=i+1;

Fq=100*d;

left=-fq+ "%";

if (d==8) {

Alert (' last picture ');

i=8;

}else{

$ ("#imgs li"). CSS ({"-webkit-transform": "Translate3d" ("+left+", 0px,0px) ","-webkit-transition ":" 500ms Linear "});

}

$ ('. S_count i '). text (i);

},

Swiperight:function () {

var d=$ (this). index ();

D=d-1;

I=i-1;

Fq=-100*d;

left=fq+ "%";

if (d==-1) {

Alert (' first one ');

I=1;

}else{

$ ("#imgs li"). CSS ({"-webkit-transform": "Translate3d" ("+left+", 0px,0px) ","-webkit-transition ":" 500ms Linear "});

}

$ ('. S_count i '). text (i);

}

});

});

$ ('. Close '). Click (function () {

$ ('. BG '). Hide ();

$ ('. Close '). Hide ();

$ ('. S_count '). Hide ();

$ (' #content '). Hide ();

$ (' #imgs li '). Remove ();

})

</script>

</body>

</html>

CSS.CSS Code

The code is as follows

Copy Code

@charset "Utf-8";

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display:block;}

Html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,lable,textarea,p,blockquote,th,td {margin:0;padding:0;}

html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; height:100%;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

Address,caption,cite,code,dfn,em,th,var{font-style:normal; font-weight:normal;}

Ol,ul{list-style:none;}

h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}

body{height:100%;}

body{position:relative; width:100%;}

#content {display:none;width:100%;overflow:hidden;position:absolute; top:15%; height:100%;}

#imgs {-webkit-transition-property:-webkit-transform;-webkit-transition-duration:0.5s;

-webkit-transition-timing-function:ease-out;padding:0px;margin:0px;-webkit-transform:translate3d (0px,0px,0px); top:0;}

#imgs li{Float:left;text-align:center;}

#imgs Img{width:90%;-webkit-transform:translate3d (0px,0px,0px);

. s_ul{width:100%; float:left; padding-top:20px;}

. S_ul li{float:left; margin-left:10px; width:90px; height:80px; overflow:hidden;

. s_ul Li img{width:90px; list-style:none;}

. bg{width:100% height:200% background: #000; opacity:0.6; position:absolute; display:none;}

close{display:none; Position:absolute z-index:10; right:20px; top:20px; color: #fff; cursor:pointer;

s_count{display:none; Position:absolute z-index:10; right:80px; top:20px; color: #fff;}

Jquery.touchSwipe.min.js Code

The code is as follows

Copy Code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQUERY+CSS Realization of Mobile Web page bullet-window Touch-screen Photo Album example attached source code

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

JQUERY+CSS Realization of Mobile Web page bullet-window Touch-screen Photo Album example attached source code

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support