使用jquery mobile，可以很容易实现幻灯播放效果，下面讲解下。 1、引入相关的jqury mobile类库 代码如下: jQuery Mobile Presentation 2、每个需要播放幻灯片的页面基本结构 代码如下: Slide 1 3、接下来是每个幻灯片之间的来回导航了，代码为： 代码如下: var changeSlide = function(toSlide){ if(toSlide.length) $.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } ); }; // ...
今天在网上找到一款回旋滚动效果，拿出来和大家一起分享。先上效果图： html 代码： 代码如下: jquery-roundabout *{padding:0;margin:0;} body{font:24px tahoma;} ul{list-style:none;margin:100px auto 0;width:500px;height:200px;} li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;} li.roundabout-in-focus{cursor:default;} Block 1 Block 2 Block 3 Block 4 ...
原本在前端html代码中，实现文字或者图片的水平垂直滚定，都是使用的marquee，但随着考虑浏览器的兼容性和符合为w3c的标准，后来想想那还是使用javascript代码来实现。后来又喜欢上了jquery，下面写的内容希望对初学者有些帮助，高手勿喷，但欢迎指导，感激不尽。 原理：无缝滚动的原理，就是利用两个内容相同的容器，来达到欺骗人的视觉的效果。然后通过整个大容器滚动条的左右或者上下的移动来实现滚动。下面附上一张手绘的图，来...
前端开发过程中需要不断学习，不断温习。最近计划白天继续温习jquery，晚上学习下原生javascript，然后利用一些时间做做网站推广SEO来着。计划暂时这些。 白天活干完，弄个jquery仿凡客诚品图片切换的效果 以前写的不是很好，今天重新做个 jquery特效，其实很简单，漠然回首也就那回事。 先来个原型吧,锋利的jquery第一个例子，相信大家都很熟悉。没错，你绝对没看错。 代码如下 代码如下: 第一张 11111111 11111111 11111111 1...
代码如下: 超漂亮的仿腾讯弹出层效果 body {background: #ffffff; color: #444;} a{color: #09d; text-decoration: none;border: 0;background-color: transparent;} body,div,q,iframe,form,h5{margin: 0;padding: 0;} img,fieldset { border: none 0; } body,td,textarea {word-break: break-all;word-wrap: break-word; line-height:1.5;} body,input,textarea,select,button { margin: 0; font-size: 12px; font-family:...
这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。 实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。 下面给出一个例子(在github下载的代码中...
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。要达到这个目的我们需要使用到Jquery和Jquery UI。 首先让我创建一个震动块，可以是图片，也可以是普通的dom元素，如div、span等，把元素的id命名为shake，这里可以任意命名。我们用图片如下： 代码如下: Jquery UI没有现成的使元素震动的方法，我们需要借助于effect方法来实现，语法如下： 代...
demo01.htm 代码如下: 方向反馈 html,body{margin:0;padding:50px;} #wrap{position:relative;width:400px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;overflow:hidden;} 方向反馈 反馈方向 $(document).ready(function(){ $.rollingMask({ objId:"wrap", content:$("#result").html() }); }); rollingMask-0.1.0.js 代码如下: /...
一、jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为： 代码如下: /* * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration 滚动1个像素的运行时间(毫秒数) * @config: delay 开始滚动的延迟时间(毫秒数) * */ jQu...
效果：点击第二个菜单项后出现一个向上滑动的动画，控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字。原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件，事件中根据鼠标的状态（无非是移入与移除）， 使用animate的动画方式使原有的div向上移70px，移出时再将页面效果变回原有的样子。 代码如下： 代码如下:$(function () { var webNav = { val: { target: 0 }, init: function ...
一个项目想用jQuery做一个可以半折叠的DIV元素，苦于jQueryUI中accordion没有提供相关的方法，就自己写了个。以前使用jQueryUI的时候发现能够用的accordion全部折叠起来了，没办法设置折叠的最小高度。 代码质量很低，希望老鸟能够指点指点。 下图是效果展示，能够借由jQuery的函数展开收缩 代码如下: //author: hlhr //require: Jquery1.4 and above function animate_toggle_height(maxh,minh,maxo,mino,element,speed) {//这个...
JQuery真的太强大了，真好看！ Jquery代码如下：代码如下: $(function () { $(".n_zyb_gzright .n_zyb_gzrightlist").hover(function () { $(this).find(".n_zyb_gzrightlistc").attr("style", "display:block").parent().siblings().find(".n_zyb_gzrightlistc").attr("style", "display:none"); })}) Html代码如下：代码如下: ...
代码如下:/****************滚动加载图片函数****************/ function scrollLoading(){ var st = $(window).scrollTop(), sth = st + $(window).height(); var $targetpics = $("img.scrloadpic"); var len = $targetpics.length; for(var i=0; i< len; i++) { var $temppic = $targetpics.eq(i); var post = $temppic.position().top; ...
源码下载bxCarousel参数说明： move：每次滚动移动图片的数量，默认为4。 display_num：展示图片的数量，默认为4。 speed：图片滚动速度，默认为500毫秒。 margin：图片间的间距，默认为0。 auto：是否自动滚动，默认为false。 auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。 auto_dir：自动滚动的方向，默认为next，你可以试下prev。 next_image：向右滚方向按钮图片，可以用CSS设置。 pre...
请求的url： 代码如下: function request(url, onSuccess, paras, method, isAsync, isMask) { $.ajax({type:method,url:url,async:isAsync,data:paras,success:function(request){onSuccess(request,isMask);},error:function(e) {if(isMask) $(#div_mask).unblock();},beforeSend:function(e){if(isMask)$(#div_mask).block({message:});}}); } ajax 中同步或者异步请求url时，当要响应返回的请求，这是有个等待过程的。 代码...