js上下滚屏效果,代码通过测试
这是html代码
<div class="box">
<div class="bcon">
<h1><b>领号实时播报</b></h1>
<!-- 代码开始 -->
<div class="list_lh">
<ul>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">2000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">3000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">4000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">5000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">6000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">7000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">8000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">9000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">1100000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">1200000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
</li>
</ul>
</div>
<!-- 代码结束 -->
</div> <script type="text/javascript">
$(document).ready(function(){
$('.list_lh li:even').addClass('lieven');
})
$(function(){
$("div.list_lh").myScroll({
speed:40, //数值越大,速度越慢
rowHeight:68 //li的高度
});
});
</script> </div>
这是css代码
/* CSS Document */
*{margin:;padding:;font-size:12px;}
body{ background:none;}
input,button,select,textarea{outline:none;}
ul,li,dl,ol{list-style:none;}
a{color:#666; text-decoration:none;} .box{ width:980px; margin:0 auto;}
.bcon{ width:270px; border:1px solid #eee; margin:30px auto;}
.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
.bcon h1 b{ font:bold 14px/40px '宋体'; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;} .list_lh{ height:400px; overflow:hidden;}
.list_lh li{ padding:10px;}
.list_lh li.lieven{ background:#F0F2F3;}
.list_lh li p{ height:24px; line-height:24px;}
.list_lh li p a{ float:left;}
.list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}
.list_lh li p span{ color:#999; float:right;}
.list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}
.btn_lh:hover{ color:#fff; text-decoration:none;} .btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}
这是js代码
// JavaScript Document
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
}; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
} this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed); _this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
}); }); } })(jQuery);
js上下滚屏效果,代码通过测试的更多相关文章
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- js 横屏 竖屏 相关代码 与知识点
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- js手机滚屏效果
原文地址:https://github.com/yanhaijing/zepto.fullpage 第一步:基于移动端的浏览体验,在头部添加浏览器渲染的分辨率 <meta name=" ...
- 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果
参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */
- vue 标题上下滚屏 无缝轮播
参考网址:https://www.jianshu.com/p/b6813193ca0d <template> <div class="wrap" :style=& ...
- Jquery实现手机上下滑屏滑动的特效代码
要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
随机推荐
- Android的BroadcastReceiver 广播 短信拦截
如何去理解BroadcastReceiver(广播)?其实可以这样想,首先我们要有一个发送广播的"媒体",在这个例子中,我们暂且用activity组件作为这个媒体,当然以后会用到s ...
- java-cmd-命令行编译和运行java文件
一.使用的工具 1.javac 2.java 二.命令 项目目录只这样的 D:/project/src/com/example/Child.java D:/project/src/com/exampl ...
- c#存储过程
1. 只返回单一记录集的存储过程 SqlConnection sqlconn = new SqlConnection(conn); SqlCommand cmd = new SqlCo ...
- RabbitMQ术语
工作队列:Working Queue 分配:多个客户端接收同一个Queue,如何做负载均衡(分配). Round-robin分配:多个接收端接收同一个Queue时,采用了Round-robin ...
- HDU 5046 Airport(dlx)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5046 题意:n个城市修建m个机场,使得每个城市到最近进场的最大值最小. 思路:二分+dlx搜索判定. ...
- Android 网格布局 计算器
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo ...
- BeagleBone Black– 智能家居控制系统 LAS - ESP8266 UDP 服务
NodeMCU 的文档里面终于发现,ESP8266 的GPIO 2 确实是 PIN 4,GPIO 0 是 PIN 3. https://github.com/nodemcu/nodemcu-firmw ...
- Tomcat源码导入Eclipse测试
想要研究下Tomcat的体系结构或者源码,最好将Tomcat的源码导入到ide中,编写实例进行代码跟踪(debug). 这里参考了网上一些资料,将自己操作过程记个流水账. 准备: 1.Tomcat源码 ...
- Android——学习:线性布局权重分配
LinearLayout在Android中被广泛使用,LinearLayout有一个比较重要的属性——android:layout_weight.按照字面理解就是该控件的权重,这个值默认是 零(0). ...
- 【CC评网】2013.第41周 不求排版,简单就好
书单 碰上国庆,加上这周,消化掉几本书: <软件随想录>:Joel的随想录,也就是他Blog上的文章的摘选:整本书看下来轻松:写了篇读书笔记[传送门]: <中国在梁庄>:这本书 ...