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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JS求平均值的小例子
Nov 29 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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类常量用法实例分析
2015/07/09 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP云打印类完整示例
2016/10/15 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python编写分类决策树的代码
2017/12/21 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Pygame的程序开始示例代码
2020/05/07 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
心得体会怎么写
2013/12/30 职场文书
大学自我评价
2014/02/12 职场文书
协议书样本
2014/04/23 职场文书
2015年教研组工作总结
2015/05/04 职场文书
单位证明范文
2015/06/18 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python