鼠标移入,文字滚动播放

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .cont{ width: 400px;margin: 200px auto;}
            .cont ul li{ margin-top: 20px; border: solid 1px black; text-align: center;line-height: 30px;;}
        </style>
    </head>
    <body>
        <div class="cont">
            <ul>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">A4令纸生产线</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">照明设备</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">燃气轮机</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">无人机</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">防暴车</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">通信设备</span></a></li>
                <li class=‘marwrap‘ ><a href="#"><span class="mar">特种车辆</span></a></li>
            </ul>
        </div>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script>
              $(".cont li a").delegate("span","mouseover",function(){
                    var content=$(this).html();
                      $(this).replaceWith("<marquee>"+content+"</marquee>");
                    });

             $(".cont li").delegate("a","mouseout",function(){
                    var content=$(this).find("marquee").html();
                      $(this).find("marquee").replaceWith("<span class=‘mar‘>"+content+"</span>");
                    })
        </script>
    </body>
</html>
时间: 2024-12-16 22:44:10

鼠标移入,文字滚动播放的相关文章

用UILabel实现文字滚动播放(跑马灯)效果

- (void)viewDidLoad { [super viewDidLoad]; //数据源 self.messageArray = [NSArray arrayWithObjects: @"1", @"2", @"3", nil]; self.msgCount = 0;//从第一条开始显示 } -(void)viewDidAppear:(BOOL)animated { //播放第一条并加入Timer设定切换间隔时间 [self msgCha

鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态</title> <link rel="shortcut icon" href="http://files.cnblogs.com/files/heyiming/logo.

纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

<style type="text/css"> #swsh .swsh_body{height:352px;overflow:hidden;}</style></p> <div id="swsh"> <script language="javascript"> var UDMoveflag=true function scrollStart(object,offset){ object.

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区

marquee 文字滚动

实现滚动效果,只知道使用jquery的SuperSlide插件.在做青海项目时,由于设计尺寸是1400*900,却要求适应1024*768的屏幕,只得采用zoom整体缩放,但这个整体缩放下,由于chrome浏览器有最小12像素大小的字体限制,采用该插件滚动的文字就会产生重叠.最后是采用了超级复杂的判断浏览器,判断屏幕尺寸,再对原本的文字进行裁剪来解决.没想到html居然有一个marquee标签,可直接拿来用,不光不用外接插件,也不用对每条新闻高度不固定而产生空隙导致的不美观而头疼,因为Super

jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

<!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-

CSS3 - 鼠标移入移出时改变样式

1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当访客鼠标移动到按钮上面时,浏览器会自动为按钮应用这新样式.12 <style>.slickButton {    color: white;    font-weight: bold;    padding: 10px;    border: solid 1px black;    backgro

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

marquee|各种文字滚动代码(适用公告)

marquee|各种文字滚动代码(适用公告) 1.建立第一个滚动字幕.代码: <marquee scrollAmount=2 width=300>我钟意网页树树</marquee> 效果如: 我钟意网页树树 2.各参数详解: a)scrollAmount.它表示速度,值越大速度越快.如果没有它,默认为6,建议设为1-3比较好. b)width和height,表示滚动区域的大小,width是宽度,height是高度.特别是在做垂直滚动的时候,一定要设height的值.