【多种JQuery循环滚动文字图片效果代码】教程文章相关的互联网学习教程文章

jQuery实现列表自动循环滚动鼠标悬停时停止滚动【图】

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。 效果图: 上干货 html: 代码如下:<div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li> <li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li> <li><a href="#" title="dddddddddd...

jquery实现文字由下到上循环滚动的实例代码

有如下代码: 代码如下:<div id="oDiv"><ul id="oUl"><li>第1个li元素</li><li>第2个li元素</li><li>第3个li元素</li><li>第4个li元素</li><li>第5个li元素</li><li>第6个li元素</li><li>第7个li元素</li><li>第8个li元素</li></ul></div>但是页面只显示前5个li(相关css不做赘述),想要循环显示li里面的内容就是在制定的时间将ul向上移动li的高度,于此同时将第一个li加到ul中li的末尾。  代码如下: 代码如下:function autoScro...

JQuery each()函数如何优化循环DOM结构的性能

如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来。这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌。 代码如下:$.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children(tbody), tr = tbody.children(tr), th = tbody.children(th), td = tbody.children...

基于jQuery的公告无限循环滚动实现代码

在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 代码如下://第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $(#callboard); var callboardUl = callboard.find(ul); var callboardLi = callboard.find(li); var liLen = callboard.find(li).length; var initHeight = callboardLi.first().outerHeight(true); win.autoAnimation = function (){ if (liLen <= 1) return; var self = arg...

jQuery循环滚动展示代码 可应用到文字和图片上【图】

看见有的同学用 Adam Cai 的代码,感觉稍显复杂而且不够 jQuery。我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单。 在线演示: http://demo.jb51.net/js/2012/jquery_xhpic/[JavaScript]代码 代码如下:$(document).ready(function(){ $("#sItem li:not(:first)").css("display","none"); var B=$("#sItem li:last"); var C=$("#sItem li:first"); setInterval(function(){ if(B.is(":visible")){ C.fadeIn(500).add...

JQuery循环滚动图片代码

代码如下:function refresh() { var s = $(".box1"); if (!s.is(":animated")) $(".box1").animate({ marginLeft: "0px" }, "slow", function () { $(.box1 img:first).before($(.box1 img:last)); $(".box1").css("margin-left", "-206px"); }); } <div class="frame"><div class="box1"><img src="img/001.png" alt="" /><img src="img/002.png" alt="" /><img src="img/003.png" alt="" /><img src="img/004.png" alt="" /></di...

基于jquery可配置循环左右滚动例子【图】

代码如下:<!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> <title>可配置横栏滚动Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} </style> <script src="jquery-1.4.1.js" ...

JQuery对checkbox操作 (循环获取)

代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %> <!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 runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script> <scrip...

基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)

从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动; 2 新微博将下面的微博先推下去,然后淡入进来; 3 鼠标经过内容暂停滚动; 4 容器底部渐变消失在背景色下。 上述4个需求之中,需求1-3为js技术实现,需求4为css技术实现,下面逐个需求来讲。 需求1和需求2:内容持续滚动的需求有些类似前一篇文章《小模块:公告滚动并暂停》中介绍的功能,在那篇文章中,此功能使用cs...

基于jquery循环map功能的代码

废话少说,看代码 代码如下:var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"] }; $.each(map,function(key,values){ console.log(key); $(values).each(function(){ console.log("\t" + this); }); }); 如果安装了firebug,控制台输出如下树状结构: 地名   北京   天津   上海 民族   汉族   藏族   维吾尔族 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历...

基于jquery的无缝循环新闻列表插件【图】

一、效果图:tips源码下载 http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar二、jquery源码: 代码如下:(function($){ $.fn.extend({ newsList:function(options){ var defaults ={ actName:li, //显示条数名; maxShowNum:6, //最多的显示条数; actNameH:28, //一次移动的距离; ulClass:.ul_news_list, //被复制层的class copyUlClass:.ul_news_list2, //复制层的class autoTime:1500, //自动运行时间; clickGoUpC:.g...

jquery异步循环获取功能实现代码

html代码: 代码如下:<table id="repTable"……> …… <span id="<%# Eval("Id") %>" class="address"></span> </table> jquery代码: 代码如下:$(document).ready(function(){ $("#repTable span.address").each(function(){ var spanTemp = $(this); $.ajax({ type: "get", url: "SceneryAjaxCall.aspx", data: "sid="+$(this).attr("id"), cache: true, dataType: "html", success: function(msg){ spanTemp.append(msg); } ...

jQueryeach循环错误在哪里哦?_html/css_WEB-ITnose

New Document 回复讨论(解决方案) 你这写法本来就不对。js里面按照你写的意思,是给btn绑定一个click事件。页面上,你是直接调用check()方法。 要么你把页面上调用check去掉,然后绑定 $(function(){ $("#btn").bind(click,function(){ //do somethings }); }); 要不然就是调用check,写一个check方法 function check(){ //do somethings } click ( 是个中文括号来的。 这个好...

javascript-jQuery悬停,图像映射,循环和数组【代码】

我想将jQuery悬停方法用于包含多个奇数形状的基本区域图像地图上方的鼠标悬停,以便在每个确切的形状上悬停都会触发图像交换,以及在单独的文本块中进行.innerhtml交换.我从完全透明的占位符“零”图像开始,然后在过渡时交换到实时图像地图区域上方的png,然后在过渡时返回到零图像. 因此,一个区域地图区域的代码如下所示.这里,areamapImage1对应于基本图像的坐标区域.$('#areamapImage1').hover(function() {$('#imageSwap').attr('s...

javascript-在for循环内时,jQuery分配失败【代码】

我有一个jQuery,当我这样做时,它可以正常工作:var slide = []; slide[1] = {hide: function() {$("#slide-1").hide();},show: function() {$("#slide-1").show(2000);}}; slide[1].show(); <<< works fine但是,如果我在循环中尝试失败:for (var i=1; i <= totalSlides; i++) {slide[i] = {hide: function() {$("#slide-" + i).hide();},show: function() {$("#slide-" + i).show(2000);}}; }; slide[1].show(); << unassigned任...