js实现DOM走马灯特效的方法

本文实例讲述了js实现DOM走马灯特效的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<!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>走马灯的特效</title> 
    <script type="text/javascript"> 
        function scroll() { 
            //将头文件标题赋值给 tit 
            var tit = document.title; 
            //获取tit的第一个字符 
            var fir = tit.charAt(0); 
            //获取tit剩余的字符 
            var left = tit.substring(1, tit.length) 
            //将头文件标题重新赋值为 (原标题的第二个字符到最后一个字符+原标的的第一个字符) 
            document.title = left + fir; 
        } 
        //让scroll每隔2000毫秒就执行scroll()一次,从而实现走马灯的效果 
        setInterval("scroll()", 2000); 
    </script> 
</head> 
<body> 
 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-01-20

javascript 走马灯效果的链接提示

走马灯效果的链接提示 鼠标放过来~ 我们 脚本学习类网站 window.onerror = null; var bName = navigator.appName; var bVer = parseInt(navigator.appVersion); var NS4 = (bName == "Netscape" && bVer >= 4); var IE4 = (bName == "Microsoft Internet Explorer" &a

走马灯效果代码js appendChild实现的无缝滚动

*{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100

浅析js 文字滚动效果

这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

c#.net 动态读取 走马灯代码实例分享

前台html及js脚本: [html] 复制代码 代码如下: <div>     <table border="0" cellpadding="0" cellspacing="0">         <tr>             <td bgcolor="#CC66FF"                  style="WIDTH: 990px; HEIGHT: 5px;

jquery实现页面百叶窗走马灯式翻滚显示效果的方法

本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

android中设置TextView/Button 走马灯(Marquee)效果示例

在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml即可 复制代码 代码如下: <SPAN style="COLOR: #993300"><TextView android:layout_width="40px" android:layout_height="wrap_content"

基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

js 走马灯简单实例

复制代码 代码如下: <!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>走马灯</t

IOS代码笔记之文字走马灯效果

本文实例为大家分享了IOS文字走马灯效果具体实现代码,供大家参考,具体内容如下 一.效果图 二.工程图  三.代码 RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" #import "UXLabel.h"

jQuery实现图片走马灯效果的原理分析

本文实例分析了jQuery实现图片走马灯效果的原理.分享给大家供大家参考,具体如下: 这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;&qu

jQuery实现图片切换效果

本文实例为大家分享了jQuery实现图片切换效果的具体代码,供大家参考,具体内容如下 动画:点击左右按钮实现图片切换 jQuery方法:animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果: <!DOCTYPE html> <html lang="en"> <head>

jquery简单的拖动效果实现原理及示例

复制代码 代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖曵原理实例</title> <style type="text/css"> #drag{width:400px;height:300px;backgr

jquery实现图片滚动效果的简单实例

复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>jquery 图片自动无缝滚动</title>      

asp.net中利用ashx实现图片防盗链的原理分析

直接分析盗链原理:看下面用httpwatch截获的http发送的数据 GET /Img.ashx?img=svn_work.gif HTTP/1.1 Accept: */* Referer: http://www.jb51.net/ Accept-Language: zh-cn UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; .NET

基于jquery自定义图片热区效果

现在整理下发出来,希望大家共同学习吧 先看效果图: 用了jquery.image-maps.js这个插件 下载地址 http://www.jb51.net/jiaoben/57930.html原理是: 通过拖动计算出当前热区可移动模块的left top right bottom 对应area的 coords 属性集成上面的位置,就可以实现热区了. 对应的模块代码是: 复制代码 代码如下: <!--模块展示 begin--> <div class="modeShow"&

jquery lazyload延迟加载技术的实现原理分析

前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器. lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,ifram

jquery引用方法时传递参数原理分析

经常到网上去下载大牛们写的js插件.每次只需将js引用并设置下变量就行了,但一直没搞明白原理(主要是大牛们的代码太简练了-,-). 这次弄清了如何传递.设置多个(很多个)参数. 如 方法为function lunbo(){}; 在调用.设置的时候写: lunbo({ speed:200, wrapper:'#id', ease:'easing' }) 则,在方法内获取的时候: function lunbo(options){ var set=$.extend({},options); var _

一个基于jquery的图片切换效果

下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

Jquery实现图片放大镜效果的思路及代码(自写)

网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个.大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间. 效果图:  代码: 复制代码 代码如下: <!DOCTYPE HTML> <html>