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设置FieldSet展开与收缩
May 15 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
JS实现小星星特效
Dec 24 Javascript
js实现飞机大战游戏
Aug 26 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的运行机制与原理(底层)
2015/11/16 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
django中静态文件配置static的方法
2018/05/20 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python使用配置文件过程详解
2019/12/28 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android