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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
Document 对象的常用方法
Jul 31 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Python 私有化操作实例分析
2019/11/21 Python
Python如何实现线程间通信
2020/07/30 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
工程部主管岗位职责
2013/11/17 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
市场策划求职信
2014/08/07 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
政风行风评议整改方案
2014/09/15 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书