css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html
js的图片的横向或者竖向的无缝滚动图片。
http://zx.bjmylike.com/fe/release/js/index_4e1f23f.js
function marquee(e,i){
var n=document.getElementById("marquee"+e),
t=document.getElementById("marquee"+e+"_1"),
s=document.getElementById("marquee"+e+"_2");
if("up"==i)
if(s.offsetTop-n.scrollTop<=)
n.scrollTop-=t.offsetHeight+;
else
{var o=n.scrollTop;n.scrollTop++,n.scrollTop==o&&(n.scrollTop=)}
else
s.offsetWidth-n.scrollLeft<=?n.scrollLeft-=t.offsetWidth:n.scrollLeft++}
function marqueeStart(e,i){
var n=document.getElementById("marquee"+e),
t=document.getElementById("marquee"+e+"_1"),
s=document.getElementById("marquee"+e+"_2");
s.innerHTML=t.innerHTML;
var o=window.setInterval("marquee("+e+", '"+i+"')",);
n.onmouseover=function(){window.clearInterval(o)},
n.onmouseout=function(){o=window.setInterval("marquee("+e+", '"+i+"')",)}
}
$(function(){
$(".nav_second_list").mouseover(function(){$(this).addClass("nav_second_list1").find("i").addClass("ix").end().find("span").addClass("span1"),$(this).siblings().removeClass("nav_second_list1").find("i").removeClass("ix").end().find("span").removeClass("span1")}),
$(".nav_second_list").mouseout(function(){$(this).removeClass("nav_second_list1").find("i").removeClass("ix").end().find("span").removeClass("span1")}),$(".box1_lr_title a").not(":first").hide(),
$(".box1_lr_title h3").first().addClass("add_bg"),$(".box1_lr_cons").not(":first").hide(),$(".box1_lr_title h3").click(function(){$(this).siblings("a").eq($(this).index()-).show().siblings("a").hide(),$(this).addClass("add_bg").siblings("h3").removeClass("add_bg"),
$(".box1_lr_cons").eq($(this).index()-).show().siblings().hide()}),$(".next").click(function(){$(".mid_c").animate({left:"-739px"},,function(){$(".mid_c").append($(".mid_c li:first")),
$(".mid_c").css({left:"0px"})})}),$(".prev").click(function(){$(".mid_c").prepend($(".mid_c li:last")),
$(".mid_c").css({left:"-739px"}),$(".mid_c").animate({left:"0px"},,function(){})}),$("#marquee1_1 li").hover(function(){$("#marquee1_1 li").children(".box3_l_zj").stop(!,!).eq($(this).index()).animate({bottom:"0px"},)},function(){$("#marquee1_1 li").children(".box3_l_zj").stop(!,!).eq($(this).index()).animate({bottom:"-114px"},)}),$("#marquee1_2 li").hover(function(){$("#marquee1_2 li").children(".box3_l_zj").stop(!,!).eq($(this).index()).animate({bottom:"0px"},)},function(){$("#marquee1_2 li").children(".box3_l_zj").stop(!,!).eq($(this).index()).animate({bottom:"-114px"},)})
}),
marqueeStart(,"left");
css 图片的无缝滚动的更多相关文章
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- Javascript实现 图片的无缝滚动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- SuperSlidev2.1 轮播图片和无缝滚动
使用方法,狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class=&q ...
- CSS实现简单无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 图片实现无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript(六)——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
随机推荐
- Linux IPC udp/ip socket 编程
模型 #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #include < ...
- android 利用Path.cubicTo 画 贝塞尔曲线
Path.cubicTo void android.graphics.Path.cubicTo(float x1, float y1, float x2, float y2, float x3, fl ...
- java 如何在pdf中生成表格
1.目标 在pdf中生成一个可变表头的表格,并向其中填充数据.通过泛型动态的生成表头,通过反射动态获取实体类(我这里是User)的get方法动态获得数据,从而达到动态生成表格. 每天生成一个文件夹存储 ...
- S5PV210的内存分配研究分析
S5PV210内存一般会使用SDRAM和DDR2 (DDR SDRAM),SDRAM的uboot启动网络已经有很多资料的,对于DDR2还有有很多疑惑,如果有错误的地方,请大家一定指出,醍醐灌顶,不胜感 ...
- 使用Tcmalloc进行堆栈分析
在前一篇译文<使用TCmalloc的堆栈检查>,介绍了Tcmalloc进行堆栈检查,今天翻译<heap-profiling using tcmalloc>,了解如何 TCmal ...
- windows下 MySQL手动安装与卸载
下载文件以后进行解压 ,指定文件的具体位置 1.安装 选择路径下的mysqld --intall 指定服务名称 --设置配置文件 例子: C:\Users\Administrator\Desktop ...
- AngularJS几个基础概念
作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方.作用域是视图和作用域之间的胶水.在应用将视图渲染并呈现 ...
- hdu-5933----hdu-5943
hdu-5933 思路: 贪心,首先要求总和是k的倍数,而又要求相邻,说明相邻的一块如果是sum/k的倍数,那么就地切割这样才能使操作数目最少; hdu-5934 思路: 强连通分量,可以找出强连通分 ...
- Docker Network containers
Network containers Estimated reading time: 5 minutes If you are working your way through the user gu ...
- Unity实现刺客信条灯光的思路探究
灯光需求 类似刺客信条的开场CG动画,场景中打着酷炫的灯光,玩家在场景中行走可以感受到灯光很真实. 参考视频:http://www.iqiyi.com/w_19rqytbmvt.html 运行环境 安 ...