FlexSlider插件的详细设置参数

Flexslider具有以下特性:

支持滑动和淡入淡出效果。

支持水平、垂直方向滑动。

支持键盘方向键控制。

支持触控滑动。

支持图文混排,支持各种html元素。

自适应屏幕尺寸。

可控制滑动单元个数。

更多选项设置和回调函数。

HTML
在head部分载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件

然后在body中加入以下HTML代码:

使用了.flexslider来包括所有需要滚动的内容元素,然后使用<ul class=”slides”>这个class非常关键,内部的滚动内容都是针对.slides的,然后在<li>内部加入任意  html元素,包括图片和文字。

jQuery

调用Flexslider插件非常简单,使用如下代码:

然后预览网页效果,一个内容切换效果就完成了,当然想要更多个性化设置,flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

 

jq公告上下滚动

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  2.     <html xmlns=“http://www.w3.org/1999/xhtml”>
  3.     <head>
  4.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5.     <title>开拓者博客</title>
  6.     <!– jq cdn镜像库 www.150643.com–>
  7.     <script src=“http://code.jquery.com/jquery-2.2.3.js” integrity=“sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=” crossorigin=“anonymous”></script>
  8.     </head>
  9.     <body>
  10.     <!– div –>
  11.     <div class=“scroll-wrap” style=“height: 16px; overflow: hidden;”>
  12.     <ul class=“scroll-con fn-left” style=“margin-top: 0px;”>
  13.                     <li style=“height: 16px; line-height: 16px; overflow: hidden;”>
  14.                         <a href=“https://150643.com”>潍坊网站建设_宏源网络</a>
  15.                     </li>
  16.                     <li style=“height: 16px; line-height: 16px; overflow: hidden;”>
  17.                         <a href=“https://150643.com”>潍坊网站建设_宏源网络2</a>
  18.                     </li>
  19.                     <li style=“height: 16px; line-height: 16px; overflow: hidden;”>
  20.                         <a href=“https://150643.com”>潍坊网站建设_宏源网络3</a>
  21.                     </li>
  22.                     <li style=“height: 16px; line-height: 16px; overflow: hidden;”>
  23.                         <a href=“https://150643.com”>潍坊网站建设_宏源网络4</a>
  24.                     </li>
  25.     </ul>
  26.     </div>
  27.     <!– div end –>
  28.     </body>
  29.     <script type=“text/javascript”>
  30.     /*公告滚动*/
  31.     $(function(){
  32.         var len = $(“.scroll-con li”).length;
  33.         console.log(len);
  34.         if(len > 1){
  35.             textRoll=function(){
  36.                 $(“.scroll-wrap”).find(“.scroll-con”).animate({
  37.                     marginTop : “-16px”
  38.                 },500,function(){
  39.                     $(this).css({marginTop : “0px”}).find(“li:first”).appendTo(this);
  40.                 });
  41.             };
  42.             var rollsetInterval(‘textRoll()’,2000);
  43.             $(“.scroll-con li”).hover(function() {
  44.                 clearInterval(roll);
  45.             }).mouseout(function(){
  46.                 rollsetInterval(‘textRoll()’,5000);
  47.             });
  48.         }
  49.     })
  50.     </script>
  51.     </html>

jquery使用AJAX完成上传图片文件信息

form表单

jq-ajax事件

PHP后台处理

 

jQuery 停止动画

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

 

animate() 方法允许您创建自定义的动画。

语法:

$(selector).animate({params},speed,callback);

params 定义动画的 CSS 属性。

speed 效果时长

callback 动画完成后所执行的函数名称。

 

fadeIn()淡入fadeOut()淡出fadeToggle()切换fadeTo()透明度

语法:
$(selector).fadeIn(speed,callback);  用于淡入已隐藏的元素display:none。
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
speed效果时长,以下值:”slow”、”fast” 或毫秒。
callback参数是 fading 完成后所执行的函数名称。
$(selector).fadeTo(speed,opacity,callback);
效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
完成后所执行的函数名称

 

hide() 和 show() 方法来隐藏和显示 HTML 元素,toggle()取反

语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed隐藏/显示速度,可以取以下值:”slow”、”fast” 或毫秒。
callback指完成后可执行函数()
toggle() 方法来切换 hide() 和 show() 方法。

 

演示一个简单的 jQuery hide() 方法。

 

鼠标点击滑动指定位置li

 

 

jQuery 实现仿 Win 7 弹出窗口

这是一款基于jQuery的仿Win 7风格的弹出窗口,关于弹出窗口我们在之前已经分享过不少了,比如这款jQuery对话框插件 支持拖拽,也支持各种类型的弹出对话框。今天分享的这款win 7风格窗口模拟效果非常逼真,支持最大化最小化和关闭功能,同时也支持拖拽。

sdfds

[url href=http://150643.com/avg/win7]在线演示[/url]

jQuery书本翻页3D动画特效

记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真。今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果。书本的内容支持任意HTML元素,相当灵活。page

[url href=http://150643.com/avg/shu/]在线演示[/url]

jQuery二级下拉菜单 菜单简易实用

这次要分享的依然是一款jQuery下拉菜单,这款下拉菜单尽管只有二级下拉的功能,但是实际表现形式却可以使多级的下拉菜单。这款jQuery菜单的外观是红色的,看上去非常温暖,菜单的整体看上去非常简单,但是却相当实用,你可以试试。610202738

[url href=http://150643.com/avg/daohang/index.html]在线演示[/url]

右侧带缩略图导航的jQuery焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画。jikj

[url href=http://150643.com/avg/huandeng/index.html]在线演示[/url]