- 浏览: 196731 次
- 性别:
- 来自: 北京
最新评论
-
hncdcsm1:
非常给力,找了很久了,谢谢分享
99款高质量免费(X)HTML/CSS模板(转自blog.bingo929.com不错) -
yuying:
谢谢诶!
非常不错的CSS表单显示效果
一、 把下面代码放到<body>区域中
<!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-Type" content="text/html; charset=gb2312" /> <title>不停滚动——可用于公告</title> </head> <style type="text/css"> <!-- a { font-size:12px; color:#123D8C; line-height:24px; cursor:pointer; } a:hover { text-decoration:underline; color:red; } --> </style> <body> <SCRIPT language=JavaScript> <!-- var index =15 link = new Array(14); //链接数组 text = new Array(14); //链接文字数组 link[0] ='#' link[1] ='#' link[2] ='#' link[3] ='#' link[4] ='#' link[5] ='#' link[6] ='#' link[7] ='#' link[8] ='#' link[9] ='#' link[10] ='#' link[11] ='#' link[12] ='#' link[13] ='#' link[14] ='#' text[0] ='新闻一' text[1] ='新闻二' text[2] ='新闻三' text[3] ='新闻四' text[4] ='新闻五' text[5] ='新闻六' text[6] ='新闻七' text[7] ='新闻八' text[8] ='新闻九' text[9] ='新闻十' text[10] ='新闻十一' text[11] ='新闻十二' text[12] ='新闻十三' text[13] ='新闻十四' text[14] ='新闻十五' document.write ("<marquee scrollamount='1' scrolldelay='60' direction='UP' width='300' height='26' onmouseover="this.stop()" onmouseout="this.start()">"); for (i=0;i<index;i++) { document.write ("<a herf="+link[i]+" target='_blank'>"); document.write (text[i] + "</a><br>"); } document.write ("</marquee>") //--> </SCRIPT> </body> </html>
这个地方“ onmouseover="this.stop()" onmouseout="this.start()" ”很关键,如果不加这个就不会点中时停止了。
二、这个简单很容易实现这种效果
<marquee scrollamount='1' scrolldelay='50' direction='UP' width='300' height='26' onmouseover="this.stop()" onmouseout="this.start()"> <a href=http://www.csdn.net/>csdn</a> <br /> <a href=http://www.sina.com.cn/>sina</a> <br /> <a href=http://www.sohu.com/>sohu</a> <br /> <a href=http://www.163.com/>163</a> <br /> </marquee>
附:关于marquee的属性介绍
<marquee aligh=left/center/right/top/bottom bgcolor=#n font=n directon=left/right/up/down behavior=type height=n hspace=n scrollamount=n Scrolldelay=n width=n VSpace=n loop=n> </marquee>
Bgcolor:用于设定活动字幕的背景颜色,一般是十六进制数。
Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示从一端滚动到另一端;behavior="slide"表示从一端快速滑动到另一端,且不重复;behavior="alternate"表示在两端之间来回滚动。
Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount:用于设定活动字幕一次滚动的距离。
scrolldelay:用于设定滚动两次之间的延迟时间。
Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。
〈marquee〉标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。
direction 方向 top down left right
scrollDelay 停留时间(毫秒)
scrollAmount 每次移动距离
发表评论
-
如何解决ps导出jpg或png文件过大的问题
2019-07-08 09:48 2665最近做图,忽觉存储文件过程中MAC奇慢无比,竟然发现存储出来 ... -
在线loading图标生成网站
2014-07-15 11:39 1238分享几个优秀的在线loading图标生成网站,方便实现。htt ... -
备忘录
2014-04-17 16:52 729text-shadow:0 1px 1px rgba(25 ... -
好设计的20条金律
2014-01-27 16:46 571可以打破规则,但不 ... -
转:5个设计师应该去的优质设计分享平台 [复制链接]
2012-08-28 16:16 832http://dribbble.com/ http://dr ... -
转一个关于英文自动断行问题的贴子
2011-04-08 20:18 2273转自:http://maymei.ycool.com/post ... -
22个实用的在线配色网站
2010-11-22 09:21 1525如果感觉对色彩的把握还不是很到位,如果你的设计的时候色彩的感觉 ... -
ie6png透明
2010-11-08 22:19 856var arVersion = navigator.appVe ... -
div层遮盖flash(兼容浏览器)
2010-10-26 22:34 1036div层遮盖flash(兼容浏览器) 转自:htt ... -
(转)75个最佳Web设计资源,强烈推荐!
2010-10-03 21:14 890本文地址:http://www.woiweb.net/top- ... -
CSS实现自动等比例缩略图的方法
2010-10-02 15:30 1753完美解决自动缩略图的代码,以实现对原图的等比例收缩。 代码 ... -
针对Google Chrome谷歌浏览器的CSS hack
2010-09-14 13:26 3112所幸Google Chrome用的是与Safari一样的 ... -
解决不同浏览器窗口大小是否显示某DIV问题
2010-09-12 22:57 1040解决不同浏览器窗口大小是否显示某DIV问题: <SCR ... -
图片在DIV中居中
2010-05-07 17:20 1902图片在DIV中永远居中 <div id=&quo ... -
设定网页最小最大宽度和高度(兼容IE6)
2010-03-30 21:38 3052/* 最小寬度 */ .min_width{min-widt ... -
您需要了解的DIVCSS网页布局的8条面试题目
2010-01-26 10:03 874CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官 ... -
转来的总结CSS规范
2010-01-25 15:33 972最近领导让整理个CSS规范做个内部培训,搜了搜资料,觉得这篇文 ... -
如何用css实现圆角_CSS实现圆角解决方案(转)
2010-01-14 18:22 2591导言: 本文探讨的是圆角框的终极解决 ... -
网页设计的3D元素运用25例
2010-01-12 22:23 750Yoast ... -
5种在设计中应用光线和阴影的简单技法 [转]
2010-01-12 22:14 717凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回 ...
相关推荐
### JS 无缝滚动,鼠标放上去暂停代码 在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细...
#### 二、文本自动向上循环滚动实现原理 1. **HTML结构**:首先,我们需要创建一个`<marquee>`标签来包含滚动的文本内容。`<marquee>`是一个非标准的HTML标签,用于创建自动滚动的内容。 2. **CSS样式**:接下来,...
然而,当文本内容过长,无法在控件的固定区域内完全显示时,我们可能需要实现一种自动滚动的效果,使得被遮盖的部分能够逐渐展现。这就是标题中提到的"wpf 实现textblock内容自动滚动动画"。 在WPF中实现TextBlock...
移开鼠标后,滚动停止。中间部分的鼠标经过事件则用于暂停滚动,提供更好的用户体验。 要创建一个Vue组件,你需要定义一个名为`SeamlessScroll`的新组件,然后在Vue实例中注册它。组件的模板部分可以包含一个包含...
在实际应用中,为了增加用户体验,我们可能还需要添加停止滚动的交互,比如鼠标悬停时暂停滚动,鼠标离开后恢复滚动。此外,还可以调整滚动速度、动画效果,甚至实现多行文字滚动等更复杂的特效。 文件名"texiao...
- `onmouseover=this.stop()` 表示当鼠标移上区域的时候滚动停止 - `onmouseout=this.start()` 表示当鼠标移开的时候继续滚动 #### 四、示例代码详解 1. **文字来回滚动** ```html 文字来回滚动 ``` 此处...
通过录制鼠标点击、移动、滚动等行为,用户可以轻松创建一系列操作序列,之后只需播放这些序列,就能让计算机自动重复这些操作,节省大量手动操作的时间。 首先,我们要理解鼠标录制的基本原理。这种程序通常会监控...
根据提供的信息,我们可以深入...- 当鼠标悬停在文本区域上时,滚动暂停;鼠标移开时,滚动恢复。 通过上述对`<marquee>`标签及其各个属性的详细介绍,我们可以更好地理解和使用这个非标准但有时非常实用的HTML标签。
// 鼠标悬停时停止滚动 onmouseout = function() { stopScroll = false }; // 鼠标离开时恢复滚动 } // 初始化滚动内容 function init() { document.write(';z-index:1;visibility:hidden">'); // ...后续...
在实现滚动公告的过程中,会用到控制流语句,如循环(如“重复”、“直到”等),使得文本能够持续滚动直到达到预设条件,比如滚动完整篇公告或者到达一定时间后停止。 6. **用户交互** 源码可能还包括了用户交互...
循环滚动文本 ``` 这段代码中的文本将在指定区域内上下滚动。 ##### 示例 4:包含链接和图像 ```html <a href="http://www.example.com"><img src="image.jpg" alt="Example Image" /> ``` 这个示例中的图像...
4. **停止滚动**:在用户将鼠标移至图片上时,通过清除定时器的方式停止图片的自动滚动,以增强用户的交互体验。这通常是通过在鼠标悬停事件中调用`clearTimeout()`方法来实现的。 5. **浏览器兼容性**:该方案特别...
为了提供更好的用户体验,有时我们需要在任务栏上实现滚动显示窗口标题,即当鼠标悬停在任务栏图标上时,标题会在一定时间内自动滚动显示完整内容。 实现这个功能需要掌握以下几个关键知识点: 1. **窗口消息处理*...
5) `behavior`:定义滚动行为,可选值有 `scroll`(循环滚动),`slide`(单次滚动后停止),`alternate`(在两端之间来回滚动)。默认值为 `scroll`。 6) `loop`:指定滚动的次数。如果设置为 `-1`,则会无限循环...
- 通过`clearInterval`函数来控制鼠标悬停时停止滚动,鼠标离开后继续滚动。 #### 四、扩展与优化 除了以上基本的实现方式外,还可以通过以下几种方法进行扩展和优化: 1. **使用CSS动画代替`<marquee>`标签**:...
这可以通过监听用户的鼠标悬停事件实现,当鼠标悬停在走马灯上时,停止滚动;当鼠标离开时,恢复滚动。 在实际应用中,走马灯可能还需要考虑其他功能,比如添加导航点(小圆点)来指示当前显示的是哪个元素,或者...
5. **`behavior`**: 控制滚动行为,可选值有 `scroll`(无限循环)、`slide`(滚动一次后停止)和 `alternate`(来回滚动)。 ```html 滚动一次后停止 ``` #### 四、示例代码解析 根据给定的部分内容,可以看到...
这里还设置了一个鼠标悬停时暂停滚动的功能,即当用户的鼠标悬停在滚动区域上方时,会自动停止滚动,提高用户体验。 ### 数据加载与动态更新 除了基本的滚动功能外,案例中还涉及到了数据的动态加载。通过使用ASP...
2. **事件监听**:通过`onmouseover`和`onmouseout`事件监听器,我们实现了鼠标悬停时自动停止滚动的功能,增强了用户体验。 3. **定时器和延迟**:使用`setInterval`和`setTimeout`来控制滚动的速度和延迟。通过`...
### JavaScript鼠标事件详解 #### 一、概述 在前端开发中,JavaScript的鼠标事件是非常重要的交互方式之一。本文档详细介绍了各种鼠标事件及其应用场景,并扩展到了其他与用户交互相关的事件类型,例如键盘事件、...