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);
});
});

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

    基于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度旋转展示特效源码分享

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

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

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

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

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

    核心代码如下: 复制代码 代码如下: $(function(){ var _BuyList=$("#buyList"); var Trundle = function () { _BuyList.prepend(_BuyList.find("li:last")).css('marginTop', '-85px'); _BuyList.animate({ 'marginTop': '0px' }, 800); } var setTrundle = setInterva

  • jQuery实现无限往下滚动效果代码

    本文实例讲述了jQuery实现无限往下滚动效果的方法.分享给大家供大家参考,具体如下: 这是仿照腾讯的微薄上的一个效果.滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据. <style type="text/css"> body{ font-family: "Trebuchet MS",verdana,arial;} #loading{ display:none; font-weight:bold;color:#FF0000;} p { pad

  • jquery实现的一个导航滚动效果具体代码

    在做校园网视频网站的时候,首页有一个导航页面要实现滚动效果,有样例,但代码是在难弄懂,貌似网页设计这块还是只有自己的代码自己懂,索性就仿造别人的效果自己做了一个,大体上还行,看起来还是比较流畅的,不次于原作的幺. 现在先把代码拷贝到这里,以后再逐一简化修改: 实现滚动效果,脚本代码如下: 复制代码 代码如下: var all=0; var no=0; var s_width=0; $(document).ready(function(){ all=$('.slide').length; s_wi

  • 简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的jQuery 写的仿新浪微博 向下滚动效果 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $u

  • jquery实现仿新浪微博评论滚动效果

    jquery实现仿新浪微博评论滚动效果

    本文实例讲述了jquery实现仿新浪微博评论滚动效果.分享给大家供大家参考.具体如下: 这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动,觉得不错的就顶下. 点击此处预览效果: http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/ 运行效果如下图所示: 具体代码如下: <!DOC

  • jQuery模拟Marquee实现无缝滚动效果完整实例

    本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

  • jQuery实现表格行数据滚动效果

    jQuery实现表格行数据滚动效果

    本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下 HTML代码: <div class="box"> <div class="box-header"> <div class="col">测试1</div> <div class="col">测试2</div> <div class="col"

  • jQuery模拟实现天猫购物车动画效果实例代码

    jQuery模拟实现天猫购物车动画效果实例代码

    一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • jQuery插件scroll实现无缝滚动效果

    scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量 默认是1 delays:"1000",//完成一次动画所

随机推荐