jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片无缝滚动JS代码ul/li结构</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//滚动
(function($){ $.fn.kxbdMarquee = function(options){
var opts = $.extend({},$.fn.kxbdMarquee.defaults, options); return this.each(function(){
var $marquee = $(this);//滚动元素容器
var _scrollObj = $marquee.get(0);//滚动元素容器DOM
var scrollW = $marquee.width();//滚动元素容器的宽度
var scrollH = $marquee.height();//滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children();//滚动子元素
var scrollSize=0;//滚动元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?'width':'height',10000);
//获取滚动元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
}else{
$kids.each(function(){
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
});
}
//滚动元素总尺寸小于容器尺寸,不滚动
if (scrollSize<(_type?scrollW:scrollH)) return;
//克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2); var numMoved = 0;
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(moveId);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
var newPos = _scrollObj[_dir] + opts.scrollAmount;
if(newPos>=scrollSize){
newPos -= scrollSize;
}
_scrollObj[_dir] = newPos;
}else{
var newPos = _scrollObj[_dir] - opts.scrollAmount;
if(newPos<=0){
newPos += scrollSize;
}
_scrollObj[_dir] = newPos;
}
};
//滚动开始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(
function(){
clearInterval(moveId);
},
function(){
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
}
); //控制加速运动
if(opts.controlBtn){
$.each(opts.controlBtn, function(i,val){
$(val).bind(opts.eventA,function(){
opts.direction = i;
opts.oldAmount = opts.scrollAmount;
opts.scrollAmount = opts.newAmount;
}).bind(opts.eventB,function(){
opts.scrollAmount = opts.oldAmount;
});
});
}
});
};
$.fn.kxbdMarquee.defaults = {
isEqual:true,//所有滚动的元素长宽是否相等,true,false
loop: 0,//循环滚动次数,0时无限
direction: 'left',//滚动方向,'left','right','up','down'
scrollAmount:1,//步长
scrollDelay:10,//时长
newAmount:3,//加速滚动的步长
eventA:'mousedown',//鼠标事件,加速
eventB:'mouseup'//鼠标事件,原速
}; $.fn.kxbdMarquee.setDefaults = function(settings) {
$.extend( $.fn.kxbdMarquee.defaults, settings );
}; })(jQuery); </script>
<style>
a{ font-size:13px; color:#333333; text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
img{ border:none;} .marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;}
.marquee li{ display:inline; float:left; margin-right:12px;}
.marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;}
.marquee li a:hove{ text-decoration:none;}
.marquee li img {width:160px; height:160px;}
.marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}
</style>
</head> <body>
<script type="text/javascript">
$(document).ready(function(){
$('.marquee').kxbdMarquee({
direction:'left',
eventA:'mouseenter',
eventB:'mouseleave'
});
});
</script> <div class="marquee">
<ul>
<li><a href="#"><img src="demo/01.jpg"/><em>jquery 特效</em></a></li>
<li><a href="#"><img src="demo/02.jpg"/><em>滚动</em></a></li>
<li><a href="#"><img src="demo/01.jpg"/><em>导航</em></a></li>
<li><a href="#"><img src="demo/02.jpg"/><em>大全</em></a></li>
</ul>
</div>
</body>
</html>
jQuery图片无缝滚动JS代码ul/li结构的更多相关文章
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 竖向折叠二级导航JS代码(可防刷新ul/li结构)
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- ButterKnife View 注入
/***************************************************************************************** * ButterK ...
- PHP 转换snmp的时间格式
function convert_snmp_timeticks($timeticks) { if(!is_numeric($timeticks)) { return FALSE; } //如果是字符串 ...
- STL容器用法速查表:list,vector,stack,queue,deque,priority_queue,set,map
list vector deque stack queue priority_queue set [unordered_set] map [unordered_map] multimap [uno ...
- js实现分页列表添加样式
<script> var dUrl=window.location.href; var cUrl=(dUrl.substring(0, dUrl.indexOf('list_'))); v ...
- Oracle执行语句跟踪(1)——使用sql trace实现语句追踪
系统上的某个接口提交数据经常超时(超过3秒),而我单独在后台数据库(Oracle)执行insert,只需要17ms.提交数据的客户端没有任何的调试日志,只能通过跟踪后台语句记录实际调用过程中的数据库执 ...
- Android模仿QQ空间图片上传——原理
MainActivity.class package com.example.imagedemotext; import java.io.ByteArrayOutputStream; import j ...
- Linux内核编译和运行(转-段玉磊)
内核获取网站:https://www.kernel.org/pub/linux/kernel/ 步骤如下: 1.打开终端,更改用户权限为root.具体做法是在终端输入sudo su,然后按提示输入密码 ...
- ..c++中用c语言的输入法
题目: 竞选时,要求选民在n个候选人中选择,n个人的名字为 A,B,C,D--连续n个大写字母,如果选择n个人名字之外的人员,则为废票. 统计时以输入'#'为结束标记.请按候选人的得票数目从大到小 ...
- HDU-5532 Almost Sorted Array (LIS)
题目大意:给一个n个数的序列,问这个序列删掉一个数后是否有序. 题目分析:找最长上升子序列和最长下降子序列,只要有一个的长度不小于n-1即可. 代码如下: # include<iostream& ...
- hdu3639 强连通
题意:有 n 个人,m 组支持关系,已知支持关系可以传递,比如 A 支持 B,则所有支持 A 的人也同时支持 B,问哪些人获得的支持数最多,最多获得多少支持(自己不能获得自己的支持). 首先,如果一些 ...