js实现鼠标经过时图片滚动停止的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>鼠标经过时,<a href='sitejs-16691-1.html' target='_blank'><u>图片滚动</u></a>停止效果</title>

</head>

<style type="text/css">

<!--

#www_3water_net {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 325px;

height:245px;

}

#www_3water_net img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

-->

</style>

<body>

向左滚动

<div id="www_3water_net">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="images/m01.jpg" border="0" /></a>

<a href="#"><img src="images/m02.jpg" border="0" /></a>

<a href="#"><img src="images/m03.jpg" border="0" /></a>

<a href="#"><img src="images/m04.jpg" border="0" /></a>

<a href="#"><img src="images/m05.jpg" border="0" /></a>

<a href="#"><img src="images/m06.jpg" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10;

var tab=document.getElementById("www_3water_net");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

</body>

</html>

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

Javascript 相关文章推荐
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php实现zip文件解压操作
2015/11/03 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
python编写的最短路径算法
2015/03/25 Python
浅谈python对象数据的读写权限
2016/09/12 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
如何通过命令行进入python
2020/07/06 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
C语言笔试题回忆
2015/04/02 面试题
会计学生自我鉴定
2014/02/06 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
检讨书怎么写
2015/05/07 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android