html:

<div class="win_list_b">
<div class="scroll" style="height: 198px; overflow: hidden; position: relative;">
<ul class="win_list" style="position: absolute; top: -123px;">
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
<li> **** </li>
</ul>
</div>
</div>

jQuery:

    $(function(){
var scroll = $(".scroll"),
list = $(".win_list"); var height = $(".win_list_b").height(),
listHeight = list.outerHeight(); scroll.css({"height":height,"overflow":"hidden","position":"relative"});
list.css({"position":"absolute","top":}); var speed = ; function marquee(){
var top = parseInt(list.css("top"));
if(top <= height-listHeight){
list.css({"top":});
}else{
list.css({"top":top-});
}
}
setInterval(marquee,speed); var mainNav = $("#main-navbar");
$(window).scroll(function(){
if($(window).scrollTop()>){
mainNav.css({"background":"#222","opacity":"0.7"});
}else{
mainNav.css({"background":"transparent","opacity":""});
}
}); });

jQuery实现产品滚动效果的更多相关文章

  1. jQuery 随滚动条滚动效果 (适用于内容页长文章)

    直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...

  2. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  3. jQuery 随滚动条滚动效果 (固定版)

    //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...

  4. jquery文字纵向滚动效果(带间隔停留)

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  5. 用jQuery实现数字滚动效果

    html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...

  6. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  7. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  8. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  9. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

随机推荐

  1. express+nodecoffee写passport登录验证实例(二)

    二:实现登录认证 passport官网文档:  http://passportjs.org/guide/ passport验证使用一种被称为“策略”的方式来验证请求,策略支持3种类型的验证:用户名密码 ...

  2. Objective-C( 三、方法的声明与实现)

    OC方法的声明与实现 oc方法的声明在@interface中 大括号外@end上面 oc方法的实现在@implementation 中@end上面 OC方法中,一个参数对应一个冒号 方法名: 例  f ...

  3. mke2fs/mks.etc3/fstab/mount指令

    一.mke2fs指令mkfs.etc3 /dev/sdb1指令 主要新学习 cat /etc/filesystem  //查看文件类型 mkfs. tab键有提示    //按照系统默认的值格式化 m ...

  4. AudioManager音频管理器

    AudioManager音频管理器提供了如下几种常用方法来控制手机音频: 1.adjustStreamVolume(int StreamType,int direction,int flgs):调整手 ...

  5. ajax实际的应用

    假设两个选择框,前面一个是省份,后面一个是地级市.当选择某一省份的时候,后面的选择框会有此省份对应的地级市.可以根据ajax来实现. function load{ if(true){      var ...

  6. setsockopt的作用

    功能描述:        获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项, ...

  7. MSMQ消息队列

    MSMQ全称MicroSoft Message Queue,微软消息队列,是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任一 ...

  8. 在phpmyadmin中执行sql语句出现的错误:Unknown storage engine 'InnoDB'

    在phpmyadmin中执行sql语句出现的错误:Unknown storage engine 'InnoDB' 解决方法:解决方法:             1.关闭MySQL数据库       2 ...

  9. ubuntu下的第一个脚本file.sh

    1.新建空文档,写入shell命令: #!/bin/sh cd /home/plg ./usb 第一行一定要有,一开始参考网上写的#!/usr/bin/sh,会提示错误 bash: ./file.sh ...

  10. 戴文的Linux内核专题:10配置内核(6)

    转自Linux中国 欢迎来到下一篇关于内核配置文章!还有大量的选项需要配置.这篇文章将主要讨论PCI和ACPI. 这里我们可以启用由ACPI控制的扩展坞和可移动驱动器槽的支持(Dock).记住,ACP ...