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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php session安全问题分析
2011/06/24 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
面包屑导航详解
2017/12/07 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue实现简单图片上传
2020/06/30 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
python爬取哈尔滨天气信息
2018/07/14 Python
用Python解决x的n次方问题
2019/02/08 Python
PyQt5实现简易计算器
2020/05/30 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
如何通过python检查文件是否被占用
2020/12/18 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
一套VC试题
2015/01/23 面试题
感谢信怎么写
2015/01/21 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript