jQuery实现产品滚动效果
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实现产品滚动效果的更多相关文章
- jQuery 随滚动条滚动效果 (适用于内容页长文章)
直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...
- Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
- jQuery 随滚动条滚动效果 (固定版)
//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...
- jquery文字纵向滚动效果(带间隔停留)
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...
- 用jQuery实现数字滚动效果
html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
随机推荐
- express+nodecoffee写passport登录验证实例(二)
二:实现登录认证 passport官网文档: http://passportjs.org/guide/ passport验证使用一种被称为“策略”的方式来验证请求,策略支持3种类型的验证:用户名密码 ...
- Objective-C( 三、方法的声明与实现)
OC方法的声明与实现 oc方法的声明在@interface中 大括号外@end上面 oc方法的实现在@implementation 中@end上面 OC方法中,一个参数对应一个冒号 方法名: 例 f ...
- mke2fs/mks.etc3/fstab/mount指令
一.mke2fs指令mkfs.etc3 /dev/sdb1指令 主要新学习 cat /etc/filesystem //查看文件类型 mkfs. tab键有提示 //按照系统默认的值格式化 m ...
- AudioManager音频管理器
AudioManager音频管理器提供了如下几种常用方法来控制手机音频: 1.adjustStreamVolume(int StreamType,int direction,int flgs):调整手 ...
- ajax实际的应用
假设两个选择框,前面一个是省份,后面一个是地级市.当选择某一省份的时候,后面的选择框会有此省份对应的地级市.可以根据ajax来实现. function load{ if(true){ var ...
- setsockopt的作用
功能描述: 获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项, ...
- MSMQ消息队列
MSMQ全称MicroSoft Message Queue,微软消息队列,是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任一 ...
- 在phpmyadmin中执行sql语句出现的错误:Unknown storage engine 'InnoDB'
在phpmyadmin中执行sql语句出现的错误:Unknown storage engine 'InnoDB' 解决方法:解决方法: 1.关闭MySQL数据库 2 ...
- ubuntu下的第一个脚本file.sh
1.新建空文档,写入shell命令: #!/bin/sh cd /home/plg ./usb 第一行一定要有,一开始参考网上写的#!/usr/bin/sh,会提示错误 bash: ./file.sh ...
- 戴文的Linux内核专题:10配置内核(6)
转自Linux中国 欢迎来到下一篇关于内核配置文章!还有大量的选项需要配置.这篇文章将主要讨论PCI和ACPI. 这里我们可以启用由ACPI控制的扩展坞和可移动驱动器槽的支持(Dock).记住,ACP ...