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

前端技术 2023/09/04 JavaScript

本文实例讲述了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图片滚动放大效果代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/10580

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案