jquery动画 | 易学教程

jQuery实现带遮罩层的消息框滑入滑出效果

阅读更多关于 jQuery实现带遮罩层的消息框滑入滑出效果

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 首先，使用一个遮罩层来遮住整个页面，在遮罩层上显示一个消息框，消息框还可以被关闭，最后使用jQuery使得消息框从页面顶部滑下，实现的效果如下：遮罩层的样式如下： . overlay { background : transparent url ( images / overlay . png ) repeat top left ; position : fixed ; top : 0px ; bottom : 0px ; left : 0px ; right : 0px ; z - index : 100 ; } 样式说明了不论在哪种浏览器中，遮罩层上、右、下左边距都为0，保证了真正的遮罩。而position:fixed保存了当出现滚动条时，遮罩的完全，position:absolute不能满足这个要求，有兴趣的可以试试。过多的不解释了，不理解的也可以看看 CSS遮罩层这篇文章。下边样式用来显示消息框： . box { position : fixed ; top :- 200px ; left : 30 %; right : 30 %; background - color : #fff; color : #7F7F7F; padding : 20px ; border : 2px solid

jquery weui轮播图的使用

阅读更多关于 jquery weui轮播图的使用

jquery weui的轮播图是对第三方插件swiper的一个封装，所以使用时需要引入对应的swiper.min.js文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>weui轮播图</title> 6 <link href="css/weui.min.css" rel="stylesheet"> 7 <link href="css/jquery-weui.min.css" rel="stylesheet"> 8 <style> 9 img{ 10 width: 100%; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="swiper-container"> 16 <div class="swiper-wrapper"> 17 <div class="swiper-slide"><img src="img/1-2.png" alt=""></div> 18 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div> 19 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div>

jQuery总结

阅读更多关于 jQuery总结

jQuery是目前世界上使用最广泛的JavaScript函数库。 jQuery引入： <script type="text/javascript" src="js/jquery-1.12.2.js"></script> jQuery加载：　　　　　　jQuery提供的ready方法与原生的window.onload更快。　　第一种方式： <script type="text/javascript"> $(document).ready(function(){ ...... }); </script> 　　第二种方式： <script type="text/javascript"> $(function(){ ...... }); </script> jQuery选择器：********** 　　jQuery选择器选择规则和css样式相同 1 $(document) //选择整个文档对象 2 $('li') //选择所有的li元素 3 $('#myId') //选择id为myId的网页元素 4 $('.myClass') // 选择class为myClass的元素 5 $('input[name=first]') // 选择name属性等于first的input元素 6 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

jQuery入门[1]－构造函数

阅读更多关于 jQuery入门[1]－构造函数

jQuery入门[1]－构造函数 jQuery入门[2]－选择器 jQuery入门[3]－事件 jQuery入门[4]－链式代码 jQuery入门[5]－AJAX jQuery入门[6]－动画 JQuery 优点 ◦体积小（v1.2.3 15kb） ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera） ◦链式代码 ◦强大的事件、样式支持 ◦强大的AJAX功能 ◦易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < title > jQuery basic </ title > < style

图片滑动

阅读更多关于图片滑动

图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果,本文向大家推荐12款实用的 jQuery 图片轮播效果插件感兴趣的朋友可以了解下哦　　图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件，帮助你在你的项目中加入一些效果精美的图片轮播效果，希望这些插件能够帮助到你。 Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载量已经突破 1,800,000 次！jQuery 独立版本的插件主要有如下特色： ✓ 16个独特的过渡效果✓ 简洁和有效的标记✓ 加载参数设置✓ 内置方向和导航控制✓ 压缩版本大小只有12KB✓ 支持链接图像✓ 支持 HTML 标题✓ 3套精美光滑的主题✓ 在MIT许可下免费使用✓ 支持响应式设计插件下载效果演示 3D Image Slider 非常非常酷的 3D 图片滑动效果，有五种绚丽的效果演示。立体效果是基于 CSS3 实现的，请使用最新 Chrome，Firefox 和 Safari 浏览器浏览效果。对于不支持 CSS3 的浏览器提供了优雅的降级处理，这款插件还有详细的制作教程。

前端基础之jquery

阅读更多关于前端基础之jquery

知识预览一 jquery是什么？二什么是jquery对象三寻找元素（选择器和筛选器）四操作元素（属性，CSS，文档处理）扩展方法（插件机制）实例练习一 jquery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是jquery对象？ jquery对象是通过jquery包装DOM对象后产生的对象。jquery对象是jquery独有的，如果一个对象是jquery对象，那么他就可以使用jquery里的方法$("#test").html(); $("#test").html() 意思是：获取ID为test的元素内的HTML代码。其中HTML

jQuery 效果 - 动画

阅读更多关于 jQuery 效果 - 动画

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用；它把元素移动到左边，直到 left 属性等于 250 像素为止：实例 $(“button”).click(function(){ $(“div”).animate({left:‘250px’}); }); 提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ jQuery animate() - 操作多个属性请注意，生成动画的过程中可同时使用多个属性：实例 $(“button”).click(function(){ $(“div”).animate({ left:‘250px’, opacity:‘0.5’, height:‘150px’, width:‘150px

Jquery动画，排队与并发

阅读更多关于 Jquery动画，排队与并发

一、事件绑定 1.鼠标事件：模拟触发什么是模拟触发？虽然没有点在按钮上，也可以触发按钮的事件处理函数。如何：$元素.trigger("事件名") 即使没有点在指定的元素上，也能触发该元素上绑定的事件处理函数。简写：如果要触发的事件，刚好是21种简写中的一种，可使用事件处理函数一个函数两用的方法触发： $元素.事件名() 强调：()中不要加处理函数二、动画简单动画：写死的固定不变的三种动画效果： 1.显示隐藏：.show()、.hide()、.toggle() 问题：.show() 、.hide()不加参数时，默认使用display:block和display:none控制瞬间显示隐藏。如果想有动画效果，必须加持续事件参数。 2.上滑下滑: .slideUp()、.slideDown()、.slideToggle() 3.淡入淡出：.fadeIn()、.fadeOut()、.fadeToggle() 简单动画所有函数的共性问题： 1.效果是写死的！几乎不可维护! 2.用js定时器和DOM操作模拟的动画效果-----效率极低但是，.show()、.hide()、.toggle()在不加参数时，代替的是.css("display","block/none"), 这个是没有效率和可维护性损失的。所以，这三个不加参数的情况，还是非常推荐使用的。 2.万能动画：什么是

Jquery——动画效果

阅读更多关于 Jquery——动画效果

jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","none") 在hide(time)与show(time)中填入事件，可以慢慢消失跟显现。可以修改元素的多个样式，高度，宽度，不透明度。另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是，当使用hide或者show的时候会改变网页的高度，而fadeIn与fadeOut则不会。 $("#panel h5.head").toggle(function(){ $(this).addClass("highlight"); $(this).next().fadeOut(1000); },function(){ $(this).removeClass("highlight"); $(this).next("div .content").fadeIn(1000); }); 还有一组是slideUp，slideDown改变高度。动画方法概括方法名说明 Hide() 跟 show() 同时修改多个样式属性：高度、宽度、不透明度 fadeIn(),fadeout() 只修改不透明度 slideUp() 和 slideDown() 只改变高度 fadeTo() 只改变不透明度 Toggle() 用来替代

【jquery】jQuery设计思想

阅读更多关于【jquery】jQuery设计思想

jQuery 是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。目前，互联网上最好的jQuery入门教材，是 Rebecca Murphey 写的《jQuery基础》（jQuery Fundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里

订阅 jquery动画