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 ...
随机推荐
- mongoDB删除表中一个字段
使用update命令 update命令 update命令格式: db.collection.update(criteria,objNew,upsert,multi) 参数说明: criteria:查询 ...
- CSS3之让背景图片全部显示
起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...
- jstl 中<c:forEach />标签
<c:forEach>标签有如下属性: 属性 描述 是否必要 默认值 items 要被循环的信息 否 无 begin 开始的元素(0=第一个元素,1=第二个元素) 否 0 end 最后一个 ...
- Python基础之生成器
1.生成器简介 首先请确信,生成器就是一种迭代器.生成器拥有next方法并且行为与迭代器完全相同,这意味着生成器也可以用于Python的for循环中.另外,对于生成器的特殊语法支持使得编写一个生成器比 ...
- ThinkPHP3.1.3源码分析---php文件压缩zlib.output_compression 和 ob_gzhandler
问题来源:\ThinkPHP3.1.3_full\ThinkPHP\Lib\Core\App.class.php 中 init()方法 if(C('OUTPUT_ENCODE')){ ...
- java与mysql连接
package DBHelper; import java.sql.*; public class Demo { public static void main(String[] args) { St ...
- node.js学习资料
Node.js 入门 <汇智网 Node.js 课程> <快速搭建 Node.js 开发环境以及加速 npm> http://fengmk2.com/blog/2014/03/ ...
- MMORPG大型游戏设计与开发(part1 of net)
网络模块的设计,是大型多人在线游戏中比较重要的一部分.我之所以将网络模块放到最前面,是因为许许多多的开发者面对这一块的时候充满了疑惑,而且也觉得很神秘和深奥.这些我们面对到的困难,其实是由于我们对这方 ...
- Codeforces 715A. Plus and Square Root[数学构造]
A. Plus and Square Root time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- Java 集合系列01之 总体框架
Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.*Java集合主要可以划分为4个部分:List列表.Set ...