The code of the widget page.
Piclist. ascx
CopyCode The Code is as follows: <% @ Control Language = "C #" autoeventwireup = "true" codefile = "piclist. ascx. cs" inherits = "webparts_piclist" %>
<Style type = "text/CSS">
/* Reset style */
*
{
Margin: 0;
Padding: 0;
Word-break: Break-all;
}
Body
{
Background: # FFF;
Color: #000000;
Font: 12px/1.6em Helvetica, Arial, sans-serif;
Margin-left: 0px;
Margin-top: 0px;
Margin-Right: 0px;
Margin-bottom: 0px;
}
H1, H2, H3, H4, H5, h6
{
Font-size: 1em;
}
A
{
Color: # 0287ca;
Text-Decoration: none;
}
A: hover
{
Text-Decoration: underline;
}
Ul, Li
{
List-style: none;
}
Fieldset, IMG
{
Border: none;
}
Legend
{
Display: none;
}
Em, strong, cite, th
{
Font-style: normal;
Font-weight: normal;
}
Input, textarea, select, button
{
Font: 12px Helvetica, Arial, sans-serif;
}
Table
{
Border-collapse: collapse;
}
Html
{
Overflow:-moz-scrollbars-vertical;
}
/* Always show Firefox scrollbar */
/* Ifocus style */
# Ifocus
{
Width: pixel PX;
Height: 245px;
Margin: 0px;
Border: 1px solid # dedede;
Background: # f8f8f8;
}
# Ifocus_pic
{
Display: inline;
Position: relative;
Float: left;
Width: 540px;
Height: 225px;
Overflow: hidden;
Margin: 10px 0 0 10px;
}
# Ifocus_piclist
{
Position: absolute;
}
# Ifocus_piclist Li
{
Width: 550px;
Height: 225px;
Overflow: hidden;
}
# Ifocus_piclist img
{
Width: 550px;
Height: 225px;
}
# Ifocus_btn
{
Display: inline;
Float: right;
Width: 91px;
Margin: 9px 9px 0 0;
}
# Ifocus_btn Li
{
Width: 91px;
Height: 57px;
Cursor: pointer;
Opacity: 0.5;
-Moz-opacity: 0.5;
Filter: alpha (opacity = 50 );
}
# Ifocus_btn img
{
Width: 75px;
Height: 45px;
Margin: 7px 0 0 11px;
}
# Ifocus_btn. Current
{
Background: URL (img/ifocus_btn_bg.gif) No-Repeat;
Opacity: 1;
-Moz-opacity: 1;
Filter: alpha (opacity = 100 );
}
# Ifocus_opdiv
{
Position: absolute;
Left: 0;
Bottom: 0;
Width: 545px;
Height: 35px;
Background: #000;
Opacity: 0.5;
-Moz-opacity: 0.5;
Filter: alpha (opacity = 50 );
}
# Ifocus_tx
{
Position: absolute;
Left: 8px;
Bottom: 8px;
Color: # FFF;
}
# Ifocus_tx. Normal
{
Display: none;
}
</Style>
<SCRIPT type = "text/JavaScript">
Function $ (ID) {return document. getelementbyid (ID );}
Function addloadevent (func ){
VaR oldonload = Window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
Function moveelement (elementid, final_x, final_y, interval ){
If (! Document. getelementbyid) return false;
If (! Document. getelementbyid (elementid) return false;
VaR ELEM = Document. getelementbyid (elementid );
If (ELEM. Movement ){
Cleartimeout (ELEM. Movement );
}
If (! ELEM. style. Left ){
ELEM. style. Left = "0px ";
}
If (! ELEM. style. Top ){
ELEM. style. Top = "0px ";
}
VaR xpos = parseint (ELEM. style. Left );
VaR ypos = parseint (ELEM. style. Top );
If (xpos = final_x & ypos = final_y ){
Return true;
}
If (xpos <final_x ){
VaR Dist = math. Ceil (final_x-xpos)/10 );
Xpos = xpos + dist;
}
If (xpos> final_x ){
VaR Dist = math. Ceil (xpos-final_x)/10 );
Xpos = xpos-Dist;
}
If (ypos <final_y ){
VaR Dist = math. Ceil (final_y-ypos)/10 );
Ypos = ypos + dist;
}
If (ypos> final_y ){
VaR Dist = math. Ceil (ypos-final_y)/10 );
Ypos = ypos-Dist;
}
ELEM. style. Left = xpos + "PX ";
ELEM. style. Top = ypos + "PX ";
VaR repeat = "moveelement ('" + elementid + "'," + final_x + "," + final_y + "," + interval + ")";
ELEM. Movement = setTimeout (Repeat, interval );
}
Function classnormal (ifocusbtnid, ifocustxid ){
VaR ifocusbtns = $ (ifocusbtnid). getelementsbytagname ('lil ');
VaR ifocustxs = $ (ifocustxid). getelementsbytagname ('lil ');
For (VAR I = 0; I <ifocusbtns. length; I ++ ){
Ifocusbtns [I]. classname = 'normal ';
Ifocustxs [I]. classname = 'normal ';
}
}
Function classcurrent (ifocusbtnid, ifocustxid, n ){
VaR ifocusbtns = $ (ifocusbtnid). getelementsbytagname ('lil ');
VaR ifocustxs = $ (ifocustxid). getelementsbytagname ('lil ');
Ifocusbtns [N]. classname = 'current ';
Ifocustxs [N]. classname = 'current ';
}
Function ifocuschange (){
If (! $ ('Ifocus') return false;
$ ('Ifocus'). onmouseover = function () {atuokey = true };
$ ('Ifocus'). onmouseout = function () {atuokey = false };
VaR ifocusbtns = $ ('ifocus _ BTN '). getelementsbytagname ('lil ');
VaR listlength = ifocusbtns. length;
Ifocusbtns [0]. onmouseover = function (){
Moveelement ('ifocus _ piclist', 0, 0, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 0 );
}
If (listlength> = 2 ){
Ifocusbtns [1]. onmouseover = function (){
Moveelement ('ifocus _ piclist', 0,-225,5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 1 );
}
}
If (listlength> = 3 ){
Ifocusbtns [2]. onmouseover = function (){
Moveelement ('ifocus _ piclist', 0,-average, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 2 );
}
}
If (listlength> = 4 ){
Ifocusbtns [3]. onmouseover = function (){
Moveelement ('ifocus _ piclist', 0,-675,5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 3 );
}
}
}
Setinterval ('autoifocus () ', 3500 );
VaR atuokey = false;
Function autoifocus (){
If (! $ ('Ifocus') return false;
If (atuokey) return false;
VaR focusbtnlist = $ ('ifocus _ BTN '). getelementsbytagname ('lil ');
VaR listlength = focusbtnlist. length;
For (VAR I = 0; I <listlength; I ++ ){
If (focusbtnlist [I]. classname = 'current') var currentnum = I;
}
If (currentnum = 0 & listlength! = 1 ){
Moveelement ('ifocus _ piclist', 0,-225,5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 1 );
}
If (currentnum = 1 & listlength! = 2 ){
Moveelement ('ifocus _ piclist', 0,-average, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 2 );
}
If (currentnum = 2 & listlength! = 3 ){
Moveelement ('ifocus _ piclist', 0,-675,5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 3 );
}
If (currentnum = 3 ){
Moveelement ('ifocus _ piclist', 0, 0, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 0 );
}
If (currentnum = 1 & listlength = 2 ){
Moveelement ('ifocus _ piclist', 0, 0, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 0 );
}
If (currentnum = 2 & listlength = 3 ){
Moveelement ('ifocus _ piclist', 0, 0, 5 );
Classnormal ('ifocus _ BTN ', 'ifocus _ TX ');
Classcurrent ('ifocus _ BTN ', 'ifocus _ TX', 0 );
}
}
Addloadevent (ifocuschange );
</SCRIPT>
<Div align = "center">
<Div id = "ifocus">
<Div id = "ifocus_pic">
<Div id = "ifocus_piclist" style = "Left: 0; top: 0;">
<Ul runat = "server" id = "ulimgbig">
</Ul>
</Div>
<Div id = "ifocus_opdiv">
</Div>
<Div id = "ifocus_tx">
<Ul runat = "server" id = "urimgtitle">
</Ul>
</Div>
</Div>
<Div id = "ifocus_btn">
<Ul runat = "server" id = "ulimgsmall">
</Ul>
</Div>
</Div>
</Div>
The following is the control background and an image code: Copy code The Code is as follows: public partial class webparts_piclist: system. Web. UI. usercontrol
{
Protected void page_load (Object sender, eventargs E)
{
Showimages ();
}
Public void showimages ()
{
For (INT I = 0; I <listimages. Count; I ++)
{
// Title and thumbnail
If (I = 0)
{
Urimgtitle. innerhtml + = "<li class = 'current'>" + listimages [I]. imagetitle1 + "</LI> ";
Ulimgsmall. innerhtml + = "<li class = 'current'> </LI> ";
}
Else
{
Urimgtitle. innerhtml + = "<li class = 'normal'>" + listimages [I]. imagetitle1 + "</LI> ";
Ulimgsmall. innerhtml + = "<li class = 'normal'> </LI> ";
}
// Large image
Ulimgbig. innerhtml + = "<li> <a href =" + listimages [I]. imagehref1 + "target = '_ blank'> </a> </LI> ";
}
}
Private list <showimages> listimages;
Public list <showimages> listimages
{
Get {return listimages ;}
Set {listimages = value ;}
}
}
// Image attributes
Public class showimages
{
String imagesrc;
String imagehref;
String imagetitle;
String imagealt;
Public String imagealt1
{
Get {return imagealt ;}
Set {imagealt = value ;}
}
Public String imagesrc1
{
Get {return imagesrc ;}
Set {imagesrc = value ;}
}
Public String imagehref1
{
Get {return imagehref ;}
Set {imagehref = value ;}
}
Public String imagetitle1
{
Get {return imagetitle ;}
Set {imagetitle = value ;}
}
}
The implementation idea is to use the showimages set as an attribute of the control, and then facilitate the cyclic assignment of the set.
The following code calls the page:Copy codeThe Code is as follows: List <showimages> listimages = new list <showimages> ();
Showimages image1 = new showimages ();
Image1.imagealt1 = "";
Image1.imagehref1 = "http://www.jb51.net ";
Imag1.imagesrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi? /Rurl4_ B = hour & A = 25 & B = 23 ";
Image1.imagetitle1 = "this is my self-portrait ";
Listimages. Add (image1 );
Listimages. Add (image2 );
Listimages. Add (image3 );
Listimages. Add (image4 );
Piclist1.listimages = listimages;
OK, a simple control is implemented.
Author: cnblogs meow
