js图片滚动效果时间可随意设定当鼠标移上去时停止
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!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> <body> <style type="text/css"> <!-- #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 1000px; } #demo img { border: 10px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="images/小美景1.jpg" border="0" /> </a> <a href="#"><img src="images/小美景2.jpg" border="0" /> </a> <a href="#"><img src="images/小美景3.jpg" border="0" /> </a> <a href="#"><img src="images/小美景4.jpg" border="0" /> </a> <a href="#"><img src="images/小美女4.jpg" border="0" /> </a> <a href="#"><img src="images/小美女2.jpg" border="0" /> </a> </div> <div id="demo2"></div> </div> </div> <script> var speed=50; var tab=document.getElementById("demo"); 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页面上使用动态时间具体实现
复制代码 代码如下: <!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=&qu
-
js双色时间效果代码
TIMER TIMER [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js实现动态显示时间效果
话不多说,请看代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>时间显示器</title> </head> <body> <div id="d"></div> <script type="text/javascript"> var nowT
-
纯JS实现动态时间显示代码
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script language="javascript">
-
JavaScript实现同步于本地时间的动态时间显示方法
本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法.分享给大家供大家参考.具体分析如下: 动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领. 一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 复制代码 代码如下: <!DOCTYPE html
-
JS 时间显示效果代码
复制代码 代码如下: function settime() { var myyear,mymonth,myweek,myday,mytime,mymin,myhour,mysec; var mydate=new Date(); myyear=mydate.getFullYear(); mymonth=mydate.getMonth(); myday=mydate.getDate(); myhour=mydate.getHours(); mymin=mydate.getMinutes(); mys
-
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
要实现类似功能,用JS就可以,实现方法如下: 一.javascript函数实现:实例1: 复制代码 代码如下: //JavaScript函数:var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;function getDateDiff(dateTimeStamp){var now = new Date().getTime()
-
仅2行代码的javascript按指定格式显示日期时间效果
在蓝色理想学习了N年,今天第一次发点自己的原创,因为我曾为解决该问题花了不少时间,主要是网络上找到的代码要么非常烦琐,要么不能通用或格式只能固定几个,所以我专门对这个问题进行了研究,最终优化到只有2行代码,非常精简.主要是用到了JSON.正则和eval 函数,如果有什么问题欢迎大家指正. 感谢zhanyuzai 的优化,经测试2行代码没有发现问题,现在已更新过来 /// /// 格式化显示日期时间 /// /// 待显示的日期时间,例如new Date() /// 需要显示的格式,例如yyyy-
-
js显示动态时间的方法详解
本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的
-
js图片滚动效果时间可随意设定当鼠标移上去时停止
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
JS无缝滚动效果实现方法分析
本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无
-
jquery中$.fn和图片滚动效果实现的必备知识总结
前言 图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery.IIFE.setInterval等基础以及$.fn用法: jquery中$.fn用法 $.fn是jquery的命名空间,如果对jquery源码有过学习,就不难发现源码中有如下代码: jquery.fn=jquery.prototype={ init:function(selector,context){ /* *code */ } } 所以说jquery.fn也就是jque
-
jQuery+css实现图片滚动效果(附源码)
源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设
-
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此
-
标准的js无缝滚动效果
本文实例为大家分享了js无缝滚动效果实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #warp{ width: 1200px; height: 300px; overflow: hidden; margin:100p
-
基于vue.js无缝滚动效果
一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
-
微信小程序实现图片滚动效果示例
本文实例讲述了微信小程序实现图片滚动效果.分享给大家供大家参考,具体如下: 效果:左右滑动可以切换展示图片 代码: <!--pages/test/test.wxml--> <!-- 组件 --> <swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='wid
-
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo
-
简单实现js无缝滚动效果
本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert
随机推荐
- PHP数据库操作Helper类完整实例
- SWT(JFace)体验之ViewForm的使用
- Visual Studio 2013如何使XML文件转换成类
- js实现日历的简单算法
- c#进程之间对象传递方法
- C/C++可变参数的使用
- PHPExcel读取EXCEL中的图片并保存到本地的方法
- 基于promise.js实现nodejs的promises库
- 一天一个shell命令 文本操作系列-comm命令用法
- javascript结合fileReader 实现上传图片
- 利用反射获得类的public static/const成员的值实例
- java排序算法之_选择排序(实例讲解)
- Java多线程中不同条件下编写生产消费者模型方法介绍
- 比Math类库abs()方法性能更高的取绝对值方法介绍
- python中abs&map&reduce简介
- python利用跳板机ssh远程连接redis的方法
- Tornado实现多进程/多线程的HTTP服务详解
- ASP.NET Core中预压缩静态文件的方法步骤
- Vue 实现手动刷新组件的方法
- 微信小程序module.exports模块化操作实例浅析