This example describes jquery's stylish slide effect, which basically satisfies your slide (focus) effect on your Web page. Share to everyone for your reference. Specifically as follows:
Slide Effect Description: with the mouse click on the lower right corner of the digital button slide to switch around.
The screenshot of the running effect is as follows:
Specific implementation code:
attached: All parameter lists
Intervaltime:5,//Set interval time is 5 seconds "unit: Seconds" [Default is 5 seconds] movespeedtime:400//Switch A picture time required, "unit: milliseconds" [Default is 400 milliseconds] Movestyle: "Left",//toggle direction can be Selected value: "left | Right | Up | Down ' left: toggle to the right: toggle up and down: Toggle down: Switch down [default left toggle] MouseEvent: "MouseClick",//Mouse action button event, optional value: "MouseClick | MouseOver "MouseClick: mouse click Switch. MouseOver: The mouse has slipped over the switch. [Default for mouse click button Toggle] ishastitlebar:true,//whether or not to display the title background optional value: "true | False ' [default to True] Titlebar:{titlebar_height:40,titlebar_bgcolor: ' #000000 ', titlebar_alpha:0.5},//heading background style, ( Ishastitlebar = True if enabled) Titlebar_height:40-> title background height. [Default:] Titlebar_bgcolor: "#000000"-> Title background color. [Default: #000000] titlebar_alpha:0.5-> title background transparency, value "0~1". [Default: 0.5] ishastitlefont:true,//whether to display the caption text optional value: "true | False [default to True] Titlefont:{titlefont_size:12,titlefont_color: "#FFFFFF", titlefont_family: "Verdana", Titlefont_ Weight: "Bold"},//Heading text style, (enabled under Ishastitlefont = True) Titlefont_size-> caption text size per pixel.
[Default: 12] Titlefont_color: "#FFFFFF"-> title text color.
[Default: #000000] Titlefont_family: "VerdanA "-> title text font.
[Default: Verdana] Titlefont_weight: "Bold"-> title text weight. Optional value: "Bold |
normal [default: bold], Normal is not bold. Ishasbtn:true,//Whether the button is displayed Btn:{btn_bgcolor: "#666666", Btn_bghovercolor: "#CC0000", Btn_fontcolor: "#CCCCCC", Btn_ Fonthovercolor: "#000000", btn_fontfamily: "Verdana", Btn_bordercolor: "#999999", Btn_borderhovercolor: "#FF0000", BTN
_borderwidth:1,btn_bgalpha:0.7}//button style settings, (enabled ISHASBTN = True) Btn_bgcolor: "#666666"-> button background color [default: #666666].
Btn_bghovercolor: "#CC0000"-> button slide over/click background color [default: "#CC0000"].
Btn_fontcolor: "#CCCCCC"-> button text color [default: #CCCCCC].
Btn_fonthovercolor: "#000000"-> button slide/click button text color [default: "#000000"].
btn_fontfamily: "Verdana",-> button text font [default: "Verdana"].
Btn_bordercolor: "#999999"-> button border color [default: #999999].
Btn_borderhovercolor: "#FF0000"-> button slide over/click button border Color [default: "#FF0000"].
Btn_borderwidth:1-> button Border width, the unit pixel cannot exceed 3 [default: 1].
btn_bgalpha:0.7-> button Transparency, take the value "0~1" [Default: 0.7].
Hopefully this article will help you with the jquery effect design.