`
menzi_love
  • 浏览: 1913 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Marquee-鼠标控制

阅读更多
<table>
<tr>
  <td>
   <img src="images1/an2.gif" id="imgLeft" onMouseOver="r_left()" onMouseOut="r_left_out()" width="23" height="20">
  </td>
  <td>
   <DIV id=demo style="OVERFLOW: hidden; WIDTH: 270px; COLOR: #ffffff; HEIGHT: 70px">
    <table><tr><td id=demo1>
    <table width="360" height="60" border="0">
       <tr>
     <td width="30" height="45" align="center" valign="bottom"><img src="<%=request.getContextPath() %>/include/images1/csszx.jpg" width="75" height="40"></td>
     <td width="80" height="45" align="center" valign="bottom"><img src="<%=request.getContextPath() %>/include/images1/csbjx.jpg" width="75" height="40"></td>
     <td width="80" height="45" align="center" valign="bottom"><img src="<%=request.getContextPath() %>/include/images1/csshx.jpg" width="75" height="40"></td>
     <td width="80" height="45" align="center" valign="bottom"><img src="<%=request.getContextPath() %>/include/images1/csqdx.jpg" width="75" height="40"></td>
     <td width="30" height="45" align="center" valign="bottom"><img src="<%=request.getContextPath() %>/include/images1/csqzx.jpg" width="75" height="40"></td>
      </tr>
      <tr class="wenbenziti">
     <td height="15" align="center">深圳</td>
     <td height="15" align="center">北京</td>
     <td align="center">上海</td>
     <td align="center">青岛</td>
     <td align="center">泉州</td>
      </tr>
    </table>
    </td><TD id=demo2 width="0"></TD>
    </tr></table>
   </DIV>
  </td>
  <td>
   <img src="images1/an1.gif" onMouseOver="r_right()" onMouseOut="r_right_out()" id="imgRight" width="23" height="20">
  </td>
</tr>
</table>

< script >
var dir=0//每步移动像素,大=快
var speed=1//循环周期(毫秒)大=慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
demo.scrollLeft+=dir

demo.onmouseover=function() //暂停移动
demo.onmouseout=function() //继续移动
}
function r_left(){if (dir=-1)dir=1}//换向左移
function r_right(){if (dir=1)dir=-1}//换向右移
function r_left_out()
function r_right_out()
var MyMar=setInterval(Marquee,speed)

</ script >
分享到:
评论

相关推荐

    Marquee-js

    1. **方向控制**:Marquee-js支持水平和垂直两个方向的滚动,可以根据设计需求自由选择。 2. **速度调整**:可以通过配置参数来设置滚动速度,使得滚动效果更为平滑或快速。 3. **暂停与继续**:当鼠标悬停在滚动...

    reactive-marquee-component

    在"reactive-marquee-component"中,可能会有控制滚动暂停、继续或改变速度的事件处理。 6. **性能优化**:React使用虚拟DOM(Virtual DOM)提高渲染效率。组件仅在状态变化时更新必要的部分,而不是整个页面。在...

    MarqueeUp向上轮播的跑马灯RollNotice向上走的滚动公告

    4. **事件监听**:为了实现用户交互,如暂停和重新启动跑马灯,我们需要监听用户的鼠标悬停、点击等事件,并根据这些事件调整定时器的状态。 5. **Vue.js框架**:压缩包中的文件名包含“vue-marquee-roll-up”,这...

    利用Marquee实现无缝循环滚动文字

    - 通过`onmouseover`和`onmouseout`事件处理鼠标悬停和离开时的动画暂停和恢复。 - **示例代码**:提供了方向、高度、宽度、水平间距、垂直间距、循环次数、滚动量和滚动延迟的具体实现。 #### 4. 总结 虽然`...

    Marquee的使用

    在这个示例中,我们设置了多个属性来控制滚动效果,包括滚动的方向、速度、颜色以及鼠标交互等。 通过以上介绍,我们可以看到 `&lt;marquee&gt;` 标签虽然已经不是HTML5的标准组成部分,但其强大的功能和灵活性使其仍然能...

    JQUERY开发的marquee插件

    jQuery Marquee插件支持许多自定义选项,以控制滚动效果。比如: - `duration`: 设置内容滚动完整长度所需时间(毫秒)。 - `delayBeforeStart`: 在开始滚动前的延迟时间(毫秒)。 - `scrollAmount`: 每次移动...

    前端项目-jQuery.Marquee.zip

    - `jquery.marquee.css`:默认的样式表,控制滚动元素的外观。 - `demo`:示例文件夹,包含了一些基本的使用示例和HTML页面,帮助开发者理解和学习如何使用插件。 - `docs`:文档文件夹,可能包含插件的API说明和...

    marquee效果

    这样,当鼠标悬停在marquee元素上时,滚动会暂停;当鼠标移开时,滚动会恢复。 总结起来,通过jQuery实现marquee效果,我们可以获得更精细的控制和更好的用户体验。结合CSS样式,还可以调整滚动方向、速度、延迟等...

    marquee用法的详细解释

    在本文中,我们将深入探讨 `&lt;marquee&gt;` 的各项属性和使用方法,以及如何通过 JavaScript 进行更高级的控制。 1. **基本语法**: `&lt;marquee&gt;` 标签的基本结构如下: ```html &lt;marquee [ATTRIBUTES]&gt;CONTENT&lt;/...

    marquee 用法详解

    可以使用 JavaScript 来控制 `&lt;marquee&gt;` 的行为,例如添加鼠标悬停时暂停滚动的功能: ```html &lt;marquee onmouseover="this.stop()" onmouseout="this.start()"&gt; 鼠标悬停时暂停滚动的文字。 &lt;/marquee&gt; ``` 此外...

    marquee属性

    &lt;marquee onmouseover="this.stop()" onmouseout="this.start()"&gt;鼠标操作&lt;/marquee&gt; ``` ### 结论 虽然`&lt;marquee&gt;` 标签在HTML5中已被废弃,但在某些旧项目中仍然可以看到它的身影。理解其各个属性的功能和用法...

    jquery.marquee.js官方下载

    3. **暂停与继续**:可以通过事件或方法实现滚动的暂停和继续,例如鼠标悬停时暂停,鼠标离开后继续滚动。 4. **自动重复**:内容滚动到尽头后,可以自动反转方向并重新开始,形成循环滚动效果。 5. **兼容性**:...

    用Javascript来实现Marquee效果

    ##### 3.1 鼠标交互控制 - 通过监听`onmouseover`和`onmouseout`事件,当鼠标悬停在`icefable1`上时,设置`stopscroll`为`true`,使滚动停止;当鼠标离开时,重新设置为`false`,恢复滚动。 ##### 3.2 响应式设计 -...

    jquery.marquee.js

    例如,你可以设置滚动速度(speed)、暂停时间(pauseOnHover)以及滚动方向(direction),还可以控制是否在鼠标悬停时暂停滚动(true或false)。这些选项允许开发者根据具体需求调整滚动行为,创造出独特的视觉...

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

    首先,MSClass的一大特点是禁止了鼠标控制暂停或滚动,这使得滚动效果始终保持连贯,增强了用户体验的一致性。对于那些希望滚动内容始终保持运动状态的网页设计,这一特性尤为适用。 其次,MSClass支持鼠标悬停滚动...

    marquee滚动效果源代码

    同时,当鼠标悬停在滚动元素上时,我们可以使用JavaScript来暂停滚动,鼠标移开时恢复滚动。这可以通过监听`mouseover`和`mouseout`事件来实现: ```javascript var marqueeElement = document.querySelector('....

    js替代marquee实现图片无缝滚动

    通过JavaScript实现的无缝滚动相比`&lt;marquee&gt;`标签有更高的灵活性和控制性,可以适应不同的布局和滚动效果。这种技术可以应用于网站的广告栏、滚动新闻、产品展示等多个场景,提升用户界面的动态效果和交互体验。

    JQUERY开发的marquee

    jQuery Marquee还提供了一些事件和方法来控制跑马灯的行为: - `pause()`: 暂停当前跑马灯滚动。 - `play()`: 继续跑马灯滚动。 - `toggle()`: 切换跑马灯的暂停/播放状态。 - `destroy()`: 移除跑马灯效果,恢复...

    marquee 标签 滑动

    ##### 示例4:鼠标交互控制滚动 ```html &lt;marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" scrolldelay="100"&gt; 鼠标悬停时停止滚动 &lt;/marquee&gt; ``` #### 五、注意事项 1. **兼容...

    jandi-marquee:一个简单的 jQuery Marquee,用于选择图像的一部分

    通过这些API,你可以根据用户行为或其他事件动态控制Marquee的状态。 ### 实例与示例 在实际应用中,你可以结合不同的CSS样式和JavaScript配置,创造出各种各样的滚动效果。例如,可以创建一个带有图片轮播效果的...

Global site tag (gtag.js) - Google Analytics