aps.net--自动图片移动模块（ JQuery animate）

标签：asp.net   jquery ajax   animate   

.aspx代码如下：

<%@ 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">
        //也可以设定一个定时器,定时移动图片
        var t;


        $(document).ready(function () {
            //页面载入,启动计时器
            t = setInterval("$(‘#btn_r‘).click()", 3000);




            //鼠标移入层,出现切换的按钮
            $("#div_holder").mouseenter(function () {
                $("#div_btns").fadeIn();
                clearInterval(t);
            });


            $("#div_holder").mouseleave(function () {
                $("#div_btns").fadeOut();
                t = setInterval("$(‘#btn_r‘).click()", 3000);
            });


            //计算都是基于大图尺寸而定的.
            //点击按钮,移动内层
            $("#btn_l").click(function () {
                img_now = (img_now + img_count - 1) % img_count;//img_count由后台代码计算得出, img_now数值是0-img_count-1。
                doAnimate(img_now);
            });


            $("#btn_r").click(function () {
                img_now = (img_now + 1) % img_count;
                doAnimate(img_now);
            });


        });


        //参数表示移动到第几章图片(0-6)
        function doAnimate(_now) {
            var lpx = -(_now * img_width) + "px";
            $("#pnl_imgs").animate({ "opacity": 0.4 }, 400).animate({ "left": lpx }, 500).animate({ "opacity": 1 }, 400);
        }
    </script>

<%--    
    根据图片高度和宽度的不同,计算和设定模块的CSS,
    也可以通过JS代码 或 LESS(CSS的扩展,在CSS代码中引入JS进行计算)来设定相应控件的高度
--%>
    <style type ="text/css">
        #div_holder {width:640px; height:360px;  margin:0px auto; overflow:hidden; border:1px solid silver; }
        #div_imgOuter {  height:360px; /*高度必须设定,撑大外框层,确保左右按钮位置不变*/
                    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;  /*计算而得到的值 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">
    <h3>实现图片的切换,有2种方法</h3>
    <ul>
        <li>页面载入时,所有图片都载入到页面中,通过位移动画来切换</li>
        <li>通过更改大图的SRC地址,AJAX载入来切换</li>
        <li>重点关注模块内元素的布局</li>
    </ul>
</asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="CPH_MAIN" Runat="Server">
    
    <div id="div_holder"><%--整个模块的外框--%>


        <div id="div_imgOuter" runat="server" clientidmode="Static"><%--装载大图的外框,其内层移动--%>
            <asp:Panel ID="pnl_imgs" runat="server" ClientIDMode="Static"> <%--装载大图内层--%>  </asp:Panel>
        </div>


        <div id="div_btns"><%--切换按钮的层--%>
            <b id="btn_l" class="fl"></b>            <b id="btn_r" class="fr"></b>
        </div>


    </div>
    


    <div class ="clr"></div>


</asp:Content>

.aspx.cs代码如下：

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;     //这里设定图片的指定宽度;其他数值,均由此宽度决定

    protected void Page_Load(object sender, EventArgs e)
    {
        //loadimgs,页面载入,装载图片到层内
        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++;
        }

        //对于固定大小的大图,计算出内层的大小
        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();
    }
}

aps.net--自动图片移动模块（ JQuery animate）

标签：asp.net   jquery ajax   animate   

原文地址：http://blog.csdn.net/yayun0516/article/details/41889869