`

图片滚动预览

阅读更多

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.blk_18{width:638px; text-align:center; margin:0 auto;overflow:hidden;zoom:1; clear:both;}
.blk_18 li{list-style-type:none;}
.blk_18 .LeftBotton{width:18px;height:120px;float:left;background:url(mleft.gif) 0px center no-repeat;cursor:pointer;}
.blk_18 .RightBotton{width:18px;height:120px;float:right;background:url(mright.gif) right center no-repeat;cursor:pointer;}
.blk_18 .pcont{width:600px;height:190px;float:left;overflow:hidden;}
.blk_18 .ScrCont{width:32766px;zoom:1;}
.blk_18 #List1_1,.blk_18 #List1_2{float:left;}
.blk_18 .pl{width:200px;float:left; text-align:center;}
.blk_18 .pl img{padding:1px;margin:0 auto; border:1px #ccc solid;width:160px;height:100px;overflow:hidden;}
.blk_18 .pl{line-height:20px}
</style>


<DIV class=blk_18>
<DIV onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1()
onmouseout=ISL_StopUp_1()></DIV>
<DIV class=pcont id=ISL_Cont_1>
<DIV class=ScrCont>
<DIV id=List1_1>

              <li class=pl><a href="http://www.baidu.com" onmousedown=this.href=urlParamAdd(this.href)><img src="1.jpg"  alt="1" /></a>
              <p><a href="http://www.baidu.com" title="图片1">图片1</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
               </p></li>

              <li class=pl><a href="http://www.baidu.com" onmousedown=this.href=urlParamAdd(this.href)><img src="2.jpg"  alt="2" /></a>
              <p><a href="  http://www.baidu.com/usedcar/6161" title="图片2">图片2</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
               </p></li>

               <li class=pl><a href="http://www.baidu.com/usedcar/6128" onmousedown=this.href=urlParamAdd(this.href)><img src="3.jpg"  alt="3" /></a>
              <p><a href="  http://www.baidu.com/usedcar/6128" title="图片3">图片3</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
              </p></li>

              
        <li class=pl><a href="http://www.baidu.com/usedcar/5749" onmousedown=this.href=urlParamAdd(this.href)><img src="4.jpg"  alt="4" /></a>
              <p><a href="  http://www.baidu.com/usedcar/5749" title="图片4">图片4</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
               </p></li>

              <li class=pl><a href="http://www.baidu.com/usedcar/5748" onmousedown=this.href=urlParamAdd(this.href)><img src="5.jpg"  alt="5" /></a>
              <p><a href="  http://www.baidu.com/usedcar/5748" title="图片5">图片5</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
               </p></li>
       
        <li class=pl><a href="http://www.baidu.com/usedcar/5748" onmousedown=this.href=urlParamAdd(this.href)><img src="6.jpg"  alt="6" /></a>
              <p><a href="  http://www.baidu.com/usedcar/5748" title="图片6">图片6</a><br />
       <span class="style05">所在地:XXXX</span><br /> 
               </p></li>
            


</DIV>
<DIV id=List2_1></DIV></DIV>
</DIV>
<DIV onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1()
onmouseout=ISL_StopDown_1()></DIV></DIV>

<script type="text/javascript" src="marquee-img.js"></script>

 

请下载附件,直接打开index.html即可

分享到:
评论

相关推荐

    jQuery仿QQ空间鼠标感应图片滚动预览代码.zip

    该资源是一个基于jQuery实现的仿QQ空间图片滚动预览功能的代码示例。这个功能的主要目的是在用户将鼠标悬停在图片上时,通过鼠标滚动事件来展示图片的上下滚动预览,为个人网站的相册展示提供一种交互性强、用户体验...

    jQuery仿QQ空间鼠标悬停长图片滚动预览全图_

    在网页设计中,为了提供更好的用户体验,特别是在展示长图片时,常常会采用“鼠标悬停长图片滚动预览全图”的技术。这个技术模仿了QQ空间中的图片浏览方式,当用户将鼠标指针悬停在缩略图上时,图片会自动滚动显示...

    javascript图片预览(滚动放大缩小和拖动查看)

    在这个例子中,jQuery可能被用来绑定滚动、拖动和鼠标滚轮事件,实现图片的动态预览。 `ext-watchimg.js`是自定义的JavaScript脚本,可能是实现图片预览功能的核心部分。在这个文件中,开发者可能定义了以下函数: ...

    jQuery图片滚动幻灯片预览大图特效源码.zip

    《jQuery图片滚动幻灯片预览大图特效源码解析》 在网页设计与开发中,动态效果常常能提升用户体验,使网站更具吸引力。其中,图片滚动幻灯片和预览大图特效是常见的交互元素,能够以优雅的方式展示图片信息。本篇...

    jQuery+CSS实现的图片滚动效果

    在实际应用中,开发者可以根据需求自定义图片滚动的效果,比如添加导航按钮、自动播放、预览图等功能,同时也要考虑性能优化,如使用懒加载技术减少页面初始化时的加载量。通过jQuery和CSS的巧妙结合,可以创造出...

    jQuery鼠标悬停全图滚动预览特效

    《jQuery鼠标悬停全图滚动预览特效》 在网页设计中,为了提升用户体验和增强视觉效果,常常会采用各种动态交互技术。其中,“jQuery鼠标悬停全图滚动预览特效”是一种常见的交互手法,它使得用户在鼠标悬停在缩略图...

    缩略图滚动预览

    首先,缩略图滚动预览是用户界面中的一个重要特性,它允许用户在不打开文件的情况下快速浏览一系列图像或文档的预览图片。在MFC中,这通常通过自定义控件来实现,该控件能够处理鼠标滚轮事件,并在滚动时动态加载和...

    jQuery列表图片全图滚动预览

    5. **图片滚动预览**: 要实现上下滚动预览,我们需要记录当前显示的图片索引,并在鼠标滚轮事件触发时更新: ```javascript $previewWindow.on('mousewheel DOMMouseScroll', function(e) { var delta = e....

    js前端图片预览插件(修复火狐下鼠标滚动bug)

    火狐浏览器在某些情况下可能不支持原生的图片滚动行为,导致用户体验下降。通过此插件,开发者可以确保在火狐以及其他主流浏览器上都能获得流畅的图片预览体验。 为了使插件能够正常工作,由于JavaScript的同源策略...

    图形预览-图片自动预览程序

    这个特性是指当用户在文件管理器中滚动或者选择文件时,相应的图片会自动出现在预览区域,无需用户手动触发。实现这一功能通常需要监听文件选择事件,实时读取选定文件,然后调用图形预览的逻辑。为了提高用户体验,...

    图片预览、相册预览

    3. 用户交互:良好的图片预览体验包括平滑的滚动效果、快速的加载时间以及适应不同屏幕尺寸的布局。 4. 多格式支持:支持常见图片格式(如JPEG、PNG、GIF、BMP等)的预览,有时还需要处理更专业或少见的格式(如...

    js实现图片的滑轮滚动放大预览、拖动、旋转

    在JavaScript(JS)中,实现图片的滑轮滚动放大预览、拖动和旋转功能是一项常见的交互设计任务,尤其在网页开发中应用广泛。这项功能可以让用户更直观、更自由地查看图片细节,提高用户体验。以下将详细讲解如何实现...

    MFC缩略图滚动预览_VS2008

    在本文中,我们将深入探讨如何在Visual Studio 2008环境下使用MFC(Microsoft Foundation Classes)库实现一个缩略图滚动预览的功能。MFC是微软为Windows应用程序开发提供的一种C++类库,它封装了Windows API,使得...

    jQuery多功能滚动预览缩略图特效插件

    thumbnail-scroller是一款非常实用的jQuery多功能滚动预览缩略图特效插件...该滚动预览缩略图可以单独使用,也可以和lightbox或图片画廊等一起使用。它通过点击前后导航按钮或将鼠标放在长条缩略图上进行前后图片预览。

    vue iview多张图片大图预览、缩放翻转

    在现代Web开发中,图片预览功能是用户交互的重要组成部分,特别是在电子商务、产品展示和媒体浏览等场景中,实现一个用户体验良好的图片预览功能显得尤为重要。Vue.js是一个流行的JavaScript框架,它提供了构建用户...

    使用Qt实现简单的图片预览效果

    本文将深入探讨如何使用Qt来实现一个简单的图片预览功能。在Qt中,我们可以利用其丰富的图形视图组件和信号与槽机制,轻松实现这一功能。 首先,我们需要了解Qt中的关键组件。在实现图片预览功能时,`QGraphicsView...

    jquery图片预览插件实例

    在提供的`scroll_scan`示例中,可能包含了一个滚动预览的功能。在用户滚动页面时,预览图片会随着滚动条的移动而改变,这种效果通常通过监听滚动事件(`.scroll()`)并计算元素相对于视口的位置来实现。 总的来说,...

    jquery图片滚动例子.zip

    《jQuery图片滚动效果详解》 在网页设计中,图片滚动是一种常见的动态效果,它能够吸引用户的注意力,增强网站的互动性和视觉吸引力。本教程将基于提供的"jquery图片滚动例子.zip"压缩包,深入探讨如何利用jQuery...

    jQuery仿QQ空间鼠标悬停上下滚动预览

    "jQuery仿QQ空间鼠标悬停上下滚动预览"就是一个这样的功能,它模仿了QQ空间中照片墙的交互模式,当用户将鼠标指针悬停在图片上时,图片会自动上下滚动展示更多的内容。这个功能的核心是利用jQuery库来处理事件监听和...

Global site tag (gtag.js) - Google Analytics