脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery图片滚动放大效果

jquery图片滚动放大代码分享（2）

 更新时间：2015年08月28日 09:06:02   投稿：lijiao  
这篇文章主要介绍了jquery图片滚动放大效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。

本文实例讲述了jquery图片滚动放大效果。分享给大家供大家参考。具体如下：
这是一款基于jquery实现图片滚动放大效果代码，像是一个放大镜，适合用于产品展示，便于用户浏览产品细节，是一款非常实用的特效代码。
运行效果图：                 -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery图片滚动放大效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动条放大效果 -</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
 <div id="content">
 <h1>jquery图片滚动条放大效果</h1>
 <div class="scroller demo1">
 <div class="inside">
 <a href="#"><img src="images/img1.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img2.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img3.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img4.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img5.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img6.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img7.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img8.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img9.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img10.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img11.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img12.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img13.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img14.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img15.jpg" alt="jsfoot" /></a>
 </div>
 </div>
 </div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
 $(".demo1").scroller();
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>
</body>
</html>


以上就是为大家分享的jquery图片滚动放大效果代码，希望大家可以喜欢。

您可能感兴趣的文章:

相关文章

  • JQuery Mobile实现导航栏和页脚

    JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。本文给大家介绍JQuery Mobile实现导航栏和页脚的相关知识，需要的朋友参考下吧
    2016-03-03
  • jQuery实现标签子元素的添加和赋值方法

    jQuery实现标签子元素的添加和赋值方法

    下面小编就为大家分享一篇jQuery实现标签子元素的添加和赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 喜大普奔！jQuery发布 3.0 最终版

    喜大普奔！jQuery发布 3.0 最终版

    jQuery发布已经十年了，挺让人难以置信。过去的这些年Web开发变了很多，jQuery也随之变化着。在这个过程中，团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。就在2天前，jQuery发布了新的3.0最终版本
    2016-06-06
  • JQuery与JS里submit()的区别示例介绍

    JQuery与JS里submit()的区别示例介绍

    这篇文章主要介绍了JQuery与JS里submit()的区别,需要的朋友可以参考下
    2014-02-02
  • EasyUI学习之Combobox级联下拉列表(2)

    EasyUI学习之Combobox级联下拉列表(2)

    这篇文章主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JQuery跨Iframe选择实现代码

    JQuery跨Iframe选择实现代码

    JQuery跨Iframe选择实现,下面也通过用DOM方法与jquery方法结合的方式实现了，需要的朋友可以参考下。
    2010-08-08
  • jQuery+css实现非常漂亮的水平导航菜单效果

    jQuery+css实现非常漂亮的水平导航菜单效果

    这篇文章主要介绍了jQuery+css实现非常漂亮的水平导航菜单效果,通过each方法遍历元素再使用removeClass与addClass变换页面元素样式实现导航菜单的切换效果,需要的朋友可以参考下
    2016-07-07
  • jquery插件制作 自增长输入框实现代码

    jquery插件制作 自增长输入框实现代码

    本章我们将创建一个自增长的输入框插件，jquery.aotogrow.js
    2012-08-08
  • jquery $.each 和for怎么跳出循环终止本次循环

    jquery $.each 和for怎么跳出循环终止本次循环

    如何在jquery 中的循环中终止本次循环或者跳出循环呢？经搜索发现个不错的方法，大家不妨参考下，希望对大家有所帮助
    2013-09-09
  • 整理的40个有用的jQuery技术和教程

    整理的40个有用的jQuery技术和教程

    jQuery确实是一项伟大的技术，通过jQuery的插件，我们可以方便的创建具有更好用户界面的网站。在本文中，将和大家分享40个对你创建更好用户界面的jQuery技术和教程。
    2011-01-01

最新评论