<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<style>
*{
margin: 0;
padding: 0;
}
.div{
width: 200px;
height: 240px;
overflow: hidden;
position: relative;
border: 1px solid #d74147;
}
.div ul{
width: 200px;
height: 240px;
position: absolute;
margin: 0;
padding: 0; }
.div ul li{
width: 200px;
height: 60px;
list-style-type: none;
}
</style>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(function(){ //复制与现有的Li一样多个
$('ul').find('li').clone().appendTo($('ul'));
$('ul').height($('ul').find('li').length * $('ul').find('li').height());
setInterval(function() {
if($('ul').position().top < -$('ul').height()/2){
$('ul').css('top','0');
}
else{
$('ul').css('top',$('ul').position().top - 2 + 'px');
} },30);
}); </script>
</head>
<body>
<div class="div" id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/1.jpg" /></li> </ul>
</div>
</body>
</html>
jQuery无缝滚动向上的更多相关文章
-
jquery无缝间歇向上滚动(间断滚动)
jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...
-
利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
-
liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
-
jquery——无缝滚动
无缝滚动: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
-
jQuery无缝间歇向上滚动
http://www.jiangweishan.com/article/jQuery-scroll-up.html
-
jquery 无缝滚动 jquery.kxbdmarquee
DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...
-
jQuery无缝滚动插件
插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...
-
jquery无缝滚动效果实现
demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
-
自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
随机推荐
-
JavaEE程序员必读图书大推荐
下面是我根据多年的阅读和实践经验,给您推荐的一些图书: 第一部分: Java语言篇 1 <Java编程规范> 星级: 适合对象:初级,中级 介绍:作者James Gosling(Java之 ...
-
Hibernate2---- 查询单条记录
1.根据已完成的Hibernate1基础案例,我们接下来写一下查询,修改删除,对于基础生可以学习一下 只改写一下测试类的代码 private void findStudent() { //02Hibe ...
-
TensorFlow——循环神经网络基本结构
1.导入依赖包,初始化一些常量 import collections import numpy as np import tensorflow as tf TRAIN_DATA = "./d ...
-
css 别人找的css特效
https://blog.csdn.net/m0_37809478/article/details/76619207
-
graph slam BACK END 相关技术资料收集
学习SLAM首推2个网站: 1. WIKI上的SLAM介绍与资源总结:http://en.wikipedia.org/wiki/Simultaneous_localization_and_mappin ...
-
[svc]ext4文件删除&;访问原理
文件名信息存放在哪里? LINUX的文件名是存在父目录的block里面,并指向这个文件的inode节点,这个文件的inode节点再标记指向存放这个文件的block的数据块.我们删除一个文件,实际上并不 ...
-
人生苦短,我用python
星空不问赶路人,时光不负有心人,你可以脱变. 1.计算机的初步认识 2.解释器的安装 python2.7(2020年官方不在维护) python3.6 (官方推荐) 1.下载安装包 https://w ...
-
在word上写博客直接发到CSDN
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
-
Tomcat Connector 参数优化说明
默认参数 注: Connector 通常在%HOME_TOMCAT%/conf/servser.xml 文件内 # 正常参数 <Connector port=" protocol=&q ...
-
51nod 1013 3的幂的和 - 快速幂&;除法取模
题目地址:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1013 Konwledge Point: 快速幂:https:/ ...