aps.net--Automatic Picture Movement module (JQuery animate)

The. aspx code is as follows:

<%@ page title= "" Language= "C #" masterpagefile= "~/sample_code/amst_sample.master" autoeventwireup= "true" CodeFile = "S2_JAnimate_ImgMove.aspx.cs" inherits= "Sample_code_s2_janimate_imgmove"%>


<asp:content id= "Content1" contentplaceholderid= "Cph_head" runat= "Server" >
<script src= ". /jscript/jquery-1.8.3.js "type=" Text/javascript "></script>


<script type = "Text/javascript" >
You can also set a timer to move the picture regularly
var T;


$ (document). Ready (function () {
Page loading, starting timer
t = setinterval ("$ (' #btn_r ')." Click () "," ();




The mouse moves into the layer, the switch button appears
$ ("#div_holder"). MouseEnter (function () {
$ ("#div_btns"). FadeIn ();
clearinterval (t);
});


$ ("#div_holder"). MouseLeave (function () {
$ ("#div_btns"). FadeOut ();
t = setinterval ("$ (' #btn_r ')." Click () "," ();
});


Calculations are based on large image sizes.
Click the button to move the inner layer
$ ("#btn_l"). Click (function () {
Img_now = (img_now + img_count-1)% Img_count;//img_count is calculated by the background code, Img_now value is 0-img_count-1.
Doanimate (Img_now);
});


$ ("#btn_r"). Click (function () {
Img_now = (img_now + 1)% Img_count;
Doanimate (Img_now);
});


});


Parameter representation move to chapter a picture (0-6)
function Doanimate (_now) {
var lpx =-(_now * img_width) + "px";
$ ("#pnl_imgs"). Animate ({"Opacity": 0.4}, 400).Animate ({"Left": lpx}, +). Animate ({"Opacity": 1}, 400);
}
</script>

<%--
Depending on the height and width of the image, the CSS of the module is calculated and set,
You can also use the JS code or less (CSS extension, in the CSS code to introduce JS for calculation) to set the height of the corresponding control
--%>
<style type = "Text/css" >
#div_holder {width:640px; height:360px; margin:0px Auto; Overflow:hidden; border:1px solid silver; }
#div_imgOuter {height:360px;/* Height must be set, support large outer frame layer, make sure the left and right button position is unchanged */
Background-image:url (.. /imgs/loading.gif); Background-position:center; Background-repeat:no-repeat;
background-size:100% 100%;
position:relative; }
#div_btns {width:630px; margin:0px auto; display:none;
position:relative;
height:30px;
top:-195px; /* Calculated value 360/2+30/2 */}
#pnl_imgs {position:relative;}
#btn_l, #btn_r
{width:30px; height:30px; border:1px solid #777777;
border-radius:4px;
Cursor:pointer;
Background-image:url (.. /imgs/back_btn_1.jpg);
opacity:0.6; }
#btn_l: hover, #btn_r: hover
{opacity:0.9;}
#btn_r {background-position:-30px 0px;}
</style>


</asp:Content>
<asp:content id= "Content2" contentplaceholderid= "Cph_memo" runat= "Server" >
<ul>
<li> when the page loads, all the pictures are loaded into the page, and the shift animation toggles the </li>
<li> by changing the SRC address of the large map, Ajax loading to toggle </li>
<li> focus on the layout of elements within the module </li>
</ul>
</asp:Content>


<asp:content id= "Content3" contentplaceholderid= "Cph_main" runat= "Server" >

<div id= "Div_holder" ><%--the entire module's outer frame--%>


<div id= "Div_imgouter" runat= "Server" clientidmode= "Static" ><%--load the outer frame of the large map, moving the inner layer--%>
<asp:panel id= "Pnl_imgs" runat= "Server" clientidmode= "Static" > <%--load large image inner layer--%> </asp:Panel>
</div>


<div id= "div_btns" ><%--toggle button Layer--%>
<b id= "btn_l" class= "FL" ></b> <b id= "Btn_r" class= "fr" ></b>
</div>


</div>



<div class = "CLR" ></div>


</asp:Content>

The. Aspx.cs code is as follows:

Using system;using system.collections.generic;using system.linq;using system.web;using System.Web.UI;using System.web.ui.webcontrols;using System.data.oledb;public partial class Sample_code_s2_janimate_imgmove: system.web.ui.page{string str_cnn = "Provider=Microsoft.Jet.OLEDB.4.0;    Data source= ";    String str_sourcefile = "~/app_data/data.mdb";    OleDbConnection CNN;    OleDbCommand cmd;    OleDbDataReader Datar;    String Str_sql;     public int img_width = 640;        This sets the specified width of the image, and the other values are determined by this width protected void Page_Load (object sender, EventArgs e) {//loadimgs, page loading, loading pictures into the layer    Loadimgs ();        } protected void Loadimgs () {string str_conn = str_cnn + MapPath (str_sourcefile);        CNN = new OleDbConnection (Str_conn); Cnn.        Open ();        Str_sql = "SELECT * from T_imgs";        cmd = new OleDbCommand (Str_sql, CNN); Datar = cmd.        ExecuteReader ();        Image _img;        int imgcount = 0; while (Datar. Read ()) {_img = new IMage (); _img. imageurl=datar["Img_url"].            ToString (); Pnl_imgs.            Controls.Add (_IMG);        imgcount++; }//For large fixed-size graphs, the size of the inner layer is calculated Pnl_imgs.        Style.add ("width", img_width * imgcount + "px"); Txt_imgs. Text = Imgcount.        ToString (); Txt_imgwidth. Text = Img_width.        ToString (); String js = "var img_count=" +imgcount.  ToString () + ";" + "var img_width =" + img_width.        ToString () + ";" + "var img_now = 0;"; Scriptmanager.registerstartupscript (this, this.)                GetType (), "", JS, True); Cnn.    Close (); }}

As follows:

aps.net--Automatic Picture Movement module (JQuery animate)