Products
GG网络技术分享 2025-03-18 16:14 0
1. jQuery Easing：jQuery 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，jQuery Easing（jquery.easing.js）是一款jQuery动画效果扩展增强插件，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。
jQuery Easing是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。
2. jQuery Migrate：jQuery 应用迁移辅助插件
jQuery 版本之间有区别。比如1.9版本对于 live()，die()，toggle()，sub()，$.browser 等等都已经不支持了。 在不改变你网站代码的同时，要使用 1.9 之后的版本，你需要使用 jQuery migrate（jquery-migrate）进行转移、过度。可以加群120342833下载
3. Modernizr：专为HTML5和CSS3开发的功能检测类库
Modernizr（moderniz.js）是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
4. jQuery Flexslider：响应式 jQuery 内容滚动插件
Flexslider（jquery.flexslider.js）是一款轻量的响应式基于jQuery的内容滚动插件。Flexslider能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件，值得大家在网站开发中试试。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。
5. WOW：在页面滚动时展现动感的元素动画效果
在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。Wow.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。
6. Sticky：让某个元素一直浮动在页面某个位置
Sticky（sticky.js）一个jQuery插件，使你能够做任何元素在您的网页上总是可见的。jQuery Sticky可以让任意元素固定在页面的某个且保持可见。可以作为顶部固定导航显示插件，滚动网页下来，保持处理滚动元件在视图中，并不会因为页面滚动而消失，也不会被其他元素覆盖。
7. Bootstrap Hover Dropdown：Bootstrap鼠标悬停自动下拉
Bootstrap Hover Dropdown（bootstrap-hover-dropdown.js）插件，用于鼠标悬停时使dropdown元素下拉，增强用户体验
8. jQuery Stellar：基于jQuery的视差滚动插件
jQuery Stellar（ Stellar.js）能帮助轻松的实现网页视差滚动效果,提供任何滚动元素的视差滚动效应。只需给标签添加data属性，然后运行$.stellar()就可以实现酷炫的视差滚动了
9. Owl Carousel：强大实用的jQuery幻灯片插件
Owl Carousel（ owl.carousel.js）是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有以下特点：兼容所有浏览器、支持响应式、支持 CSS3 过度、支持触摸事件、支持 JSON 及自定义 JSON 格式、支持进度条、支持自定义事件、支持延迟加载、支持自适应高度等
10. YTPlayer：基于jQuery的YouTube视频播放插件
YTPlayer（jquery.mb.YTPlayer.js）是一款基于jQuery的YouTube视频播放插件 这个插件能在让你在你的网站播放你喜欢的YouTube视频，或把你的YouTube视频做为你网站的HTML背景。不过这个插件在天朝似乎意义不大。
11. jQuery Waypoints：jQuery滚动监听插件
jQuery Waypoints（Waypoints.js）是一款用于捕获各种滚动事件的插件。 使用Waypoints.js可以在用户滚动滑条的时候，就能触发各种各样的动态效果。比如图片浮现、文字漂移等各种各样的动画等。同时Waypoints还支持固定元素和无限滚动的功能，功力十分强大。
插件介绍：一个元素滚动监听插件 Waypoints
12. easyPieChart：轻量级的图表插件
jQuery East Pie Chart（easypiechart.js）是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素。您可以通过一组这些选项的初始化函数来设置一个自定义的行为。这个插件支持支持canvas元素所有主流浏览器。 随着excanvas你甚至可以呈现在IE 7 +8的图表
13. Isotope：jQuery智能布局插件
Isotope（jquery.isotope.js）是一款优秀的jquery自适应插件，支持大多数浏览器，需要jquery 1.4.3及其以上版本。你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。同时Isotope还有许多很酷的动画。
14. jQuery imagesLoaded：jQuery图片加载插件
imagesLoaded（jquery.imagesloaded.js）插件是在图片加载成功后才做一系列操作,检测图像是否已经加载，在图片加载成功后才做一系列操作。
插件介绍：图片延时加载插件 imagesLoaded
15. jQuery Countdown：精确到毫秒的jQuery倒计时插件
jQuery Countdown（jquery.countdown）是一款免费的jQuery倒计时插件，使用非常简单，直接下载源文件拷贝里面的代码到你需要使用的页面，然后自定义倒计时的开始时间即可，支持需要IE8+浏览器。
插件介绍：jQuery 倒计时插件 jQuery.countdown
16. jQuery Counterup：jQuery数字动态累加jQuery
jQuery Counterup（jquery.counterup.js）一个jQuery数字显示插件，用于数字从低到高动态累加，可以在一定时间内将数字动态的由0显示到指定的值。
插件介绍：数字累加插件 CounterUp
17. jqBootstrapValidation：用于Bootstrap表单的jQuery验证框架
jqBootstrapValidation（jqBootstrapValidation.js）是一个用于Bootstrap表单的JQuery验证框架。验证直接用data-方式进行代码编写，不需要编写JS格式，支持邮箱验证、数字型最大最小值验证、长度验证、正则表达式验证、异步验证、以及组合式验证、提交出错成功时回调显示。
18. jQuery Revolution Slider：强大的视差响应幻灯插件
jQuery Revolution Slider（jquery.themepunch.revolution.js）是一个具有视差功能的幻灯片插件，此插件是wordpress上目前为至最强大的幻灯片插件，具有自适应功能、可创建全宽幻灯片、具有视差效果，所有幻灯片拥有的功能他全部拥有。
Slider Revolution是codecanyon上销量第一的wordpress幻灯插件，themeforest中wordpress主题使用率最高的幻灯插件。文章缩略图、图片切换、动画效果、3d效果…只有你想不到，没有它做不到，Slider Revolution幻灯插件的强大只有你使用过后才能知道。这也是themeforest众多主题作者把它作为主题内置插件的原因。
思路：
1、要有一个确定图片地址的方法：文章中的第一张图片，或者使用自定义栏目增加一个自定义值。
2、在前台调用确定好的图片：采用函数的方法还是直接调用图片。
实现如下：
前提：
任何调用最好都是在LOOP循环中，这样可以轻松的使用$post值。
1、调用文章中的第一张图片：使用$post->post_content获得文章内容，然后用匹配的方法得到第一张图片的src值。
| preg_match(\'/<img.+src=[\\\'\\\"]([^\\\'\\\"]+)[\\\'\\\"].* \\/>/i\',$post->post_content,$index_piclink); if(count($index_piclink) >= 2)$image_src = $index_piclink[1]; if(!strstr($image_src,\'http://\'))$image_src = false; |
2、调用一个自定义栏目：在写文章的时候，增加一个名词为post_thumb的自定义栏目，然后将图片的地址作为值建立它。如meta_key:post_thumb,meta_value:http://www.utubon.com/images/logo.png，然后通过以下的方法调用它：
| $image_src = get_post_meta($post->ID,\'post_thumb\',true); $image_src = trim($image_src) !== \'\' ? trim($image_src) : false; |
3、在文章循环中使用它们
| if($image_src)echo \'<img src=\"\'.$image_src.\'\" />\'; |
4、把他们做成函数
| function get_thumb_src($size = \'thumbnail\',$first_pic_in_ctonte = true){ global $post; $image_src = \'\'; if(function_exists(\'has_post_thumbnail\') && has_post_thumbnail()){ $image_id = get_post_thumbnail_id(); $image_src = wp_get_attachment_image_src($image_id,$size); $image_src = $image_src[0]; }else{ $image_src = get_post_meta($post->ID,\'post_thumb\',$single=true); if(!$image_src && $first_pic_in_ctonte){ preg_match(\'/<img.+src=[\\\'\\\"]([^\\\'\\\"]+)[\\\'\\\"].* \\/>/i\',$post->post_content,$index_piclink); if(count($index_piclink) >= 2)$image_src = $index_piclink[1]; if(!strstr($image_src,\'http://\'))$image_src =false; } } return $image_src; } function the_thumb_src($size = \'thumbnail\',$first_pic_in_ctonte = true){ echo get_thumb_src($size,$first_pic_in_ctonte); } |
这个函数（把它放在functions.php中）实现了对文章缩略图的挑选，如果已经有特色图片，则使用特色图片，如果没有就检查post_thumb自定义栏目，如果也没有就使用文章第一张图片，如果文章没有图片，就返回false值。在使用时如下：
| if(get_thumb_src())the_thumb_src(); |
以上就是wordpress怎么使用外链图片作为文章缩略图的详细内容，更多请关注网站的其它相关文章！
Demand feedback
