jquery图片滚动放大代码分享(2)


Posted in Javascript onAugust 28, 2015

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

jquery图片滚动放大代码分享(2)

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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图片滚动放大效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
javascript this用法小结
2008/12/19 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
在keras中实现查看其训练loss值
2020/06/16 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
商务邀请函范文
2014/01/14 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
社区国庆节活动总结
2015/03/23 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书