jQuery产品间断向下滚动效果核心代码

核心代码如下:


复制代码 代码如下:

$(function(){
var _BuyList=$("#buyList");
var Trundle = function () {
_BuyList.prepend(_BuyList.find("li:last")).css('marginTop', '-85px');
_BuyList.animate({ 'marginTop': '0px' }, 800);
}
var setTrundle = setInterval(Trundle, 3000);
_BuyList.hover(function () {
clearInterval(setTrundle);
setTrundle = null;
},function () {
setTrundle = setInterval(Trundle, 3000);
});
});

时间: 2014-05-05

利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

基于JQuery制作的产品广告效果

效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看的图片上去.图片切换是由下到上变换的.制作思路:先将这5张图片分别放入到ul的5个li列表中, <1>求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去,就它显示对应的图片. <2>如果属标放上,就停止动画(可以利用clearIntval() ),如果属标移到,我们可以利用 setIntv

基于jQuery仿淘宝产品图片放大镜代码分享

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

jQuery实现的产品自动360度旋转展示特效源码分享

这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

jQuery仿淘宝网产品品牌隐藏与显示效果

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54  320X320  800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c

jQuery实现产品对比功能附源码下载

产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示     下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时

jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经"喜欢过了".  源码下载地址:http://xiazai.jb51.net/201509/yuanma/loveit(jb51.net).rar 实现过程 本文基于

Jquery 垂直多级手风琴菜单附源码下载

首先给大家展示下效果图,喜欢的朋友继续往下看哦. 这是一款简单但实用的多级垂直手风琴下拉列表菜单.该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果. 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作.如果需要一些好看的动画效果,可以实用插件中提供的main.js文件,它可以提供菜单打开和收缩时左侧小箭头的动画效果. 效果演示       源码下载 使用方法 HTML结构 该多级手风琴菜单的HTML结构非常简单:整个手风琴是一个无

基于jQuery实现的扇形定时器附源码下载

效果图如下所示: 效果演示 源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色.宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试.限时抢购的场景. HTML 首先加载jquery库文件和pietimer.js文件. <script src="jquery.min.js"></script> <script src="jqu

JQuery自适应窗口大小导航菜单附源码下载

效果图如下: 查看演示  源码下载 html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwMenu"> <li><a class="selected&qu

jQuery自动完成插件completer附源码下载

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入.诸如此类的还有时间的输入.域名的输入都能自动完成,这些都由插件completer来帮您实现. 效果展示图如下所示: 效果展示       源码下载 HTML 首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了. <script src="jquery.js"><

基于jQuery实现选取月份插件附源码下载

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示        源码下载 HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.mon

servlet监听实现统计在线人数功能 附源码下载

本文实例为大家分享了servlet统计在线人数的具体代码,供大家参考,具体内容如下 ServletContext事件监听器---->针对applicationScope ServletContextListener(*) 对整个Web应用的装载和卸载进行监听.  ServletContextAttributeListener 对ServletContext中的信息存放.删除和替换进行监听. ServletContext就是Servlet上下文监听,在web中表示的是对启动服务和销毁服务进行监听,

jQuery复制表单元素附源码分享效果演示

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

Jquery插件之Fancybox丰富的弹出层效果附源码下载

Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示    源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse