js实现图片滑动显示效果

    今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动;效果如下:

第一:先用HTML和CSS实现显示,主要HTML代码如下:

        

                   <div id="demo">
<div id="indemo">
<div id="demo1">
<asp:Repeater ID="rptImgList" runat="server">
<ItemTemplate>
<div class="container">
<div class="img">
<a href='../news/news.aspx?newsId=<%#Eval("RecordId")%>' target="_blank" title='<%#Eval("NewTitle") %>'>
<%#GetContentsImg(Eval("Content")) %>
</a>
</div>
<div class="title">
<a href='../news/news.aspx?newsId=<%#Eval("RecordId")%>' target="_blank" title='<%#Eval("NewTitle") %>'>
<%#Eval("NewTitle") %></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="demo2"></div>
</div>
</div>

第二:前台主要用到的css代码如下:

.zfNews { width:99.8%; height:334px; border:1px solid #ccc;}

#demo {overflow: hidden; width:100%; height:135px; margin-top:5px;margin-left:10px;}
#indemo {float: left;width: 800%;}
#demo1 {float: left;}
#demo2 {float: left;} #demo .container { height:100%; width:150px; float:left; margin-left:13px;}
#demo .container .img { width:100%; height:100px; float:left; border:1px solid #ccc;padding:3px;}
#demo .container .img img { width:146px; height:96px; margin:2px;}
#demo .container .title { width:100%; height:35px; line-height:35px; float:left;text-align:center;}

第三,前台页面构造好了,获取数据的方法就不写了,大同小异,现在就是用js实现图片新闻滑动效果了

1、用传统的js来实现代码如下,很简单:

     <script type="text/javascript">
var speed = 10;
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 myTime = setInterval(Marquee, speed);
tab.onmouseover = function () { clearInterval(myTime); }
tab.onmouseout = function () { myTime = setInterval(Marquee, speed); };
</script>

2.在网上看到一个用jquery实现的,就顺便借鉴了以下,Marquee.js代码如下:

(function($){
$.fn.Marquee = function(options){
var opts = $.extend({},$.fn.Marquee.defaults, options); return this.each(function(){
var $marquee = $(this);//滚动元素容器
var _scrollObj = $marquee.get(0);//滚动元素容器DOM
var scrollW = $marquee.width();//滚动元素容器的宽度
var scrollH = $marquee.height();//滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children();//滚动子元素
var scrollSize=0;//滚动元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?'width':'height',10000);
//获取滚动元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
}else{
$kids.each(function(){
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
});
}
//滚动元素总尺寸小于容器尺寸,不滚动
if (scrollSize<(_type?scrollW:scrollH)) return;
//克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2); var numMoved = 0;
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(moveId);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
var newPos = _scrollObj[_dir] + opts.scrollAmount;
if(newPos>=scrollSize){
newPos -= scrollSize;
}
_scrollObj[_dir] = newPos;
}else{
var newPos = _scrollObj[_dir] - opts.scrollAmount;
if(newPos<=0){
newPos += scrollSize;
}
_scrollObj[_dir] = newPos;
}
};
//滚动开始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(
function(){
clearInterval(moveId);
},
function(){
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
}
); //控制加速运动
if(opts.controlBtn){
$.each(opts.controlBtn, function(i,val){
$(val).bind(opts.eventA,function(){
opts.direction = i;
opts.oldAmount = opts.scrollAmount;
opts.scrollAmount = opts.newAmount;
}).bind(opts.eventB,function(){
opts.scrollAmount = opts.oldAmount;
});
});
}
});
};
$.fn.Marquee.defaults = {
isEqual:true,//所有滚动的元素长宽是否相等,true,false
loop: 0,//循环滚动次数,0时无限
direction: 'left',//滚动方向,'left','right','up','down'
scrollAmount:1,//步长
scrollDelay:10,//时长
newAmount:3,//加速滚动的步长
eventA:'mousedown',//鼠标事件,加速
eventB:'mouseup'//鼠标事件,原速
}; $.fn.Marquee.setDefaults = function(settings) {
$.extend( $.fn.Marquee.defaults, settings );
}; })(jQuery);

导入后前台jquery调用代码如下:

   <script type="text/javascript">
$(function () {
$("#demo").Marquee({
direction: 'left',
eventA: 'mouseenter',
eventB: 'mouseleave'
});
});
</script>

代码都比较简单,实现原理都是控制容器的scrollLeft位置。

js实现图片滑动显示效果的更多相关文章

  1. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  2. js swipe 图片滑动控件实现 任意尺寸适用任意屏幕

    http://www.swiper.com.cn/http://www.idangero.us/swiper/demos/ 解决问题点: 1.先得到图片真实的宽高, 根据真实宽高 等比例 2.调用的控 ...

  3. html、css、js实现手风琴图片滑动

    手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...

  4. echo.js 延迟加载图片控件

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

  5. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

  6. javascript效果:手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  7. 推荐一款手机端的图片滑动插件iSlider

    首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? ...

  8. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  9. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

随机推荐

  1. Microsoft Dynamics CRM 数据库连接存储位置在哪里 是在注册表里

    Microsoft Dynamics CRM 数据库连接存储位置是在注册表里

  2. Win7 NFS 设置详解 | X-Space

    Win7 NFS 设置详解 | X-Space Win7 NFS 设置详解

  3. [C语言 - 13] 运算符

    算术运算符 运算符的优先级 括号 > 正负 > 数学运算 > 位运算 > 数学对比 > 逻辑对比 > 条件运算 > 赋值运算   A.赋值运算符 复合赋值运算 ...

  4. Block的引用循环问题 (ARC & non-ARC)

    2010年WWDC发布iOS4时Apple对Objective-C进行了一次重要的升级:支持Block.说到底这东西就是闭包,其他高级语音例如Java和C++已有支持,第一次使用Block感觉满简单好 ...

  5. Intent简介

    1 Intent概念 1.1 Intent的作用 指明Intent所要启动的对象 提供将要启动对象组件运行需要的数据 组件类型 启动方法 Activity startActivity(Intent i ...

  6. Oracle- 表的自增长创建

    Oracle创建自增长要先写序列还要去写触发器,不像MSSQLSERVER那样方便.但也是麻烦,记录如下: Oracle中,可以为每张表的主键创建一个单独的序列,然后从这个序列中获取自动增加的标识符, ...

  7. SQLite使用教程10 运算符

    SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...

  8. 教你50招提升ASP.NET性能(五):确保分页是在数据层完成的

    (11)Make sure paging is conducted at the database layer 招数11: 确保分页是在数据层完成的 When using grid UI contro ...

  9. 清空session的方法

    清空session的方法,常用来注销的时候清空所有的session. 方法一: Enumeration e=session.getAttributeNames(); while(e.hasMoreEl ...

  10. jeasyUI属性列表

    属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)mod ...