jquery特效

jQuery焦点图切换特效插件封装

試著忘記壹切 提交于 2020-04-07 19:25:17
   网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片。一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性、视觉吸引性。容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍。由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图。如下图所示: 可添加多个 图片,设定图片链接,导航随鼠标移动切换图片,在发布文章的时候把图片压缩了有点失真。 使用本特效首先需要引入对jquery的使用,插件已经封装成jquery函数,代码如下: /* * jQuery图片轮播(焦点图)插件 */ (function ($) { $.fn.slideBox = function (options) { var defaults = { direction: 'left', duration: 0.6, easing: 'swing', delay: 3, startIndex: 0, hideClickBar: true, clickBarRadius: 5, hideBottomBar: false }; var settings = $

主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比

↘锁芯ラ 提交于 2020-03-29 14:40:57
本文主要选取了目前比较流行的JavaScript框架Dojo、Google Closure、jQuery、Prototype、Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供大家参考,如有错误欢迎指出:) 主流框架对比 Dojo(重量级框架) Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。 优点: 1. 功能强大,组件丰富(包括图表支持) 2. 面向对象的设计,有统一的命名空间和包管理机制,适用于企业级或是复杂的大型Web应用开发 缺点: 1. 复杂,学习曲线陡 2. html中也需要涉及dojo属性,将来换框架的成本高,例如: <button dojoType="dijit.form.Button" id="helloButton"> 3. 性能问题,dojo加载采用了同步机制,会暂时锁定浏览器 Google Closure(重量级框架) Google Closure

JQuery0014:JQuery中 走马灯特效

不问归期 提交于 2020-03-24 12:27:07
<div class="str4 str_wrap"> <a href="#"><img src="img/1c0ae2205709722b62e843abc0471a55_S.jpg"></a> <a href="#"><img src="img/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a> <a href="#"><img src="img/6f43b5263fbba79c5962514b85d34738_S.jpg"></a> <a href="#"><img src="img/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a> <a href="#"><img src="img/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a> <a href="#"><img src="img/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a> <a href="#"><img src="img/19f9cefdfb07230a68581d617885a3af_S.jpg"></a> <a href="#"><img src="img/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a> <a

python学习之路前端-jQuery

喜夏-厌秋 提交于 2020-03-23 03:17:46
jQuery简介 JQuery是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js库 ,它兼容 CSS3 ,还兼容各种浏览器( IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML ( 标准通用标记语言 下的一个应用)、events、实现动画效果,并且方便地为网站提供 AJAX 交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的 插件 可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。 jQuery是一个兼容多浏览器的 javascript 库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。 jQuery是免费、开源的,使用

流行的jQuery信息提示插件(jQuery Tooltip Plugin)

荒凉一梦 提交于 2020-03-22 14:12:41
流行的jQuery信息提示插件(jQuery Tooltip Plugin) 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用。如果你网站的信息提示做的好,会给访客留下非常深刻的印象。下面有30个非常流行的jQuery信息提示插件,希望对各位有所帮助。记住,所有的这些都是为了使网站设计更好。 1. Dynamic tooltip 非常漂亮的tooltip!有渐变、透明、阴影等效果。 Dynamic tooltip 2. Popup Bubble 优秀的tooltip!虽然看起来简单,但是过渡效果非常棒,适用于简单干净的网站。 Popup Bubble 3. jQuery Horizontal Tooltips Menu Tutorials 精美的tooltip!提示信息不会消失,除非你点击其它链接。看起来非常简单,但是它的动画效果却非常棒。 jQuery Horizontal Tooltips Menu Tutorials 4. Prototip 多种多样的提示效果,极有效的简化工作过程。 Prototip 5. Coda Popup Bubble 非常漂亮的信息提示,有过渡效果和背景阴影。 Coda Popup Bubble 6. Awesomeness 非常酷的信息提示,平滑的过渡效果,并且有透明边框。 Awesomeness 7. TipTip 漂亮的信息提示

流行的jQuery信息提示插件(jQuery Tooltip Plugin)

和自甴很熟 提交于 2020-03-22 14:09:45
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning , by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用。如果你网站的信息提示做的好,会给访客留下非常深刻的印象。下面有30个非常流行的jQuery信息提示插件,希望对各位有所帮助。记住,所有的这些都是为了使网站设计更好。 1. Dynamic tooltip 非常漂亮的tooltip!有渐变、透明、阴影等效果。 Dynamic tooltip 2. Popup Bubble 优秀的tooltip!虽然看起来简单,但是过渡效果非常棒,适用于简单干净的网站。 Popup Bubble 3. jQuery Horizontal Tooltips Menu Tutorials 精美的tooltip!提示信息不会消失,除非你点击其它链接。看起来非常简单,但是它的动画效果却非常棒。 jQuery Horizontal Tooltips Menu Tutorials 4. Prototip 多种多样的提示效果,极有效的简化工作过程。 Prototip 5. Coda Popup Bubble 非常漂亮的信息提示,有过渡效果和背景阴影。 Coda Popup Bubble 6. Awesomeness 非常酷的信息提示,平滑的过渡效果,并且有透明边框。 Awesomeness 7.

20款网页常用的返回顶部代码

谁都会走 提交于 2020-03-21 12:31:26
jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery win8风格的页面返回顶部按钮带二维码和qq在线客服 jQuery右下角浮动层火箭动画返回顶部效果代码 jQuery图翼网侧边带二维码的返回顶部代码 jquery win8效果的右侧网页浮动框代码返回顶部菜单按钮 seajs jquery框架实现可爱的卡通人物动画返回顶部代码 JQUERY返回顶部功能带微信二维码和新闻提示 jquery.scrollto.js实现页面平滑滚动返回顶部按钮 jquery fixed页面右侧浮动固定层返回顶部按钮带微信二维码的返回顶部代码 jquery右下角固定层返回顶部按钮_带一键关注微博的返回顶部按钮 jquery scrolltop页面滚动返回顶部_可爱的火箭动画页面置顶效果 来源: https://www.cnblogs.com/jsfoot/p

JQuery总结

a 夏天 提交于 2020-03-17 04:51:25
==========================转载================================= 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0]

jQery 常用工具大全

∥☆過路亽.° 提交于 2020-03-17 04:50:58
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项

Jquery插件按开发学习笔记(一)

那年仲夏 提交于 2020-03-16 03:54:32
1.在JQuery命名空间内声明一个特定的命名; 2.接收参数来控制插件的行为; 3.提供公有方法访问插件的配置项值; 4.提供公有方法来访问插件中其他的方法(如果可能的话); 5.保证私有方法是私有的; 6.支持元数据插件; 下面,我将逐一讲述上面的内容,并在同时给出相关的简单插件开发代码。 1.在JQuery命名空间内声明一个特定的命名 这 意味着开发的是一个单一命名的插件脚本,如果你的脚本包含多个插件或者有补充性质的插件,比如$.fn.doSomething() 和$.fn.undoSomething(),那你得声明多个命名了。但是总体来说,当开发一个插件时,我们应该努力做到用一个单一的命名来搞定整个插 件。 在例子中,我们将声明一个名为“hilight”的插件。 $.fn.hilight = function() { // Our plugin implementation code goes here. }; 我们可以这样调用: $(’#myDiv’).hilight(); 但是假如我们需要打破这种单一的命名和调用方式呢?有很多理由支持我们这么做:设计上的需要;更加简单和可读的配置;而且那样将更加符合OO的要求。 在 没有给命名空间来到麻烦的前提下,将插件的部署打破成为多个函数的形式将是十分繁琐的。我们通过认识并利用JavaScript中functions是最 高层的对象